Change content styles and structure

src/components/About.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Spinner} from '.';
+import {Spinner, Header} from '.';
 import '../static/stylesheets/globals.scss';
 import styles from './About.scss';
 import contentStyle from '../static/stylesheets/content.scss';
@@ -17,7 +17,7 @@ export default class About extends Component {
 
     return (
       <div className={contentStyle.contentWrapper}>
-        <h1>About</h1>
+        <Header header={"About"} />
         <div className={contentStyle.content} dangerouslySetInnerHTML={{__html: this.props.about.body}}>
         </div>
       </div>

src/components/Blog.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Spinner} from '.';
+import {Spinner, Header} from '.';
 import '../static/stylesheets/globals.scss';
 import styles from './Blog.scss';
 import contentStyle from '../static/stylesheets/content.scss';
@@ -38,7 +38,7 @@ export default class Blog extends Component {
 
     return (
       <div className={contentStyle.contentWrapper}>
-        <h1>Blog</h1>
+        <Header header={"Blog"} />
 
         <div className={contentStyle.content}>
           {posts}

src/components/Header.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import '../static/stylesheets/globals.scss';
+import styles from './Header.scss';
+
+export default class Header extends Component {
+
+  render () {
+    return (
+      <div className={styles.mainHeader}>
+        <h1>{this.props.header}</h1>
+      </div>
+    )
+  }
+}

src/components/Header.scss

@@ -0,0 +1,11 @@
+@import "../static/stylesheets/variables.scss";
+
+.mainHeader {
+  border-left: 5px solid $blue;
+  padding: 5px;
+  margin: 0;
+  text-align: left;
+  h1 {
+    margin: 0;
+  }
+}

src/components/Wrapper.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import {Spinner, Header} from '.';
+import '../static/stylesheets/globals.scss';
+import styles from './Wrapper.scss';
+
+export default class Wrapper extends Component {
+
+  render () {
+    return (
+      <div className={styles.centerContent}>
+        {this.props.children}
+      </div>
+    )
+  }
+}

src/components/Wrapper.scss

@@ -0,0 +1,5 @@
+@import "../static/stylesheets/variables.scss";
+
+.centerContent {
+  text-align: center;
+}

src/components/index.js

@@ -4,4 +4,6 @@ export { default as About } from './About';
 export { default as Post } from './Post';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as Spinner } from './Spinner';
+export { default as Header } from './Header';
+export { default as Wrapper } from './Wrapper';
 export { default as App } from './App';

src/containers/MainContainer.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import axios from 'axios';
-import {About, Blog, Home} from '../components';
+import {About, Blog, Home, Wrapper} from '../components';
 
 export default class BlogContainer extends Component {
 
@@ -33,10 +33,12 @@ export default class BlogContainer extends Component {
     return (
       <div>
         <Home/>
-        <About isLoading={this.state.isLoadingAbout}
-          about={this.state.about}/>
-        <Blog isLoading={this.state.isLoadingBlog}
-          posts={this.state.posts}/>
+        <Wrapper>
+          <About isLoading={this.state.isLoadingAbout}
+            about={this.state.about}/>
+          <Blog isLoading={this.state.isLoadingBlog}
+            posts={this.state.posts}/>
+        </Wrapper>
       </div>
     )
   }

src/static/stylesheets/content.scss

@@ -1,11 +1,10 @@
 @import "./variables.scss";
 
 .contentWrapper {
+  display: inline-block;
   overflow: auto;
   padding: 20px;
-  h1 {
-    text-align: center;
-  }
+  max-width: 960px;
   a {
     color: $blue;
   }
@@ -13,4 +12,5 @@
 
 .content {
   box-sizing: border-box;
+  text-align: left;
 }