Change home page layout

src/components/About.scss

@@ -1 +1,5 @@
 @import "../static/stylesheets/variables.scss";
+
+#about {
+    background-color: #324263;
+}

src/components/Wrapper.js

@@ -8,12 +8,17 @@ export default class Wrapper extends Component {
     children: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.node),
       PropTypes.node
-    ]).isRequired
+    ]).isRequired,
+    flex: PropTypes.bool
+  }
+
+  static defaultProps = {
+    flex: false
   }
 
   render () {
     return (
-      <div className={styles.centerContent}>
+      <div className={` ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` }>
         {this.props.children}
       </div>
     )

src/components/Wrapper.scss

@@ -3,3 +3,7 @@
 .centerContent {
   text-align: center;
 }
+
+.flexWrap {
+  display: flex;
+}

src/containers/MainContainer.js

@@ -31,7 +31,7 @@ export default class MainContainer extends Component {
     return (
       <div>
         <Home/>
-        <Wrapper>
+        <Wrapper flex={true}>
           <About isLoading={this.state.isLoadingAbout}
             about={this.state.about}/>
           <Blog isLoading={this.state.isLoadingBlog}

src/static/stylesheets/content.scss

@@ -12,6 +12,8 @@
   @media (min-width: $break-large) {
     width: 960px;
   }
+  min-height: 100vh;
+  height: 100vh;
 }
 
 .content {