Fix uncentered content on posts

src/components/Post.js

@@ -7,6 +7,7 @@ import styles from './Post.scss'
 import MarkdownIt from 'markdown-it'
 import fm from 'front-matter'
 import moment from 'moment'
+import Wrapper from './Wrapper'
 
 export default class Post extends Component {
   static propTypes = {
@@ -33,16 +34,16 @@ export default class Post extends Component {
     return (
       <div>
         <Navbar config={this.props.config} />
-        <div className={contentStyle.contentWrapper}>
+        <Wrapper>
+          <div className={`${contentStyle.content} ${styles.column}`}>
             <Header header={title} role="heading" aria-level="2" />
-          <div className={contentStyle.content}>
             <div className={styles.postDate}>
               <h3>{date.format('MMMM D, YYYY')}</h3>
             </div>
             <div className={styles.postContent} dangerouslySetInnerHTML={{ __html: body }} role="article">
             </div>
           </div>
-        </div>
+        </Wrapper>
       </div>
     )
   }

src/components/Post.scss

@@ -13,3 +13,8 @@
     font-weight: normal
   }
 }
+
+.column {
+  box-sizing: border-box;
+  margin: 20px;
+}

src/components/Wrapper.js

@@ -19,7 +19,7 @@ export default class Wrapper extends Component {
 
   render () {
     return (
-      <div className={` ${contentStyle.contentWrapper} ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` } role='main'>
+      <div className={` ${contentStyle.contentWrapper} ${styles.centerContent} ${this.props.flex ? styles.flex : styles.noFlex}` } role='main'>
         {this.props.children}
       </div>
     )

src/components/Wrapper.scss

@@ -2,12 +2,18 @@
 
 .centerContent {
   text-align: center;
+  margin: 0 auto;
 }
 
-.flexWrap {
+.flex {
   @media only screen and (min-width: $break-large) {
-    display: flex;
     width: 80%;
-    margin: 0 auto;
+    display: flex;
+  }
+}
+
+.noFlex {
+  @media (min-width: $break-large) {
+    width: 960px;
   }
 }

src/containers/PostContainer.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Post, Wrapper, NotFoundPage } from '../components'
+import { Post, NotFoundPage } from '../components'
 
 export default class PostContainer extends Component {
   static propTypes = {
@@ -35,10 +35,10 @@ export default class PostContainer extends Component {
     }
 
     return (
-      <Wrapper>
-        <Post isLoading={this.state.isLoading}
-          post={this.state.post} config={this.state.config} />
-      </Wrapper>
+      <Post
+        isLoading={this.state.isLoading}
+        post={this.state.post}
+        config={this.state.config} />
     )
   }
 }

src/stylesheets/content.scss

@@ -1,14 +1,10 @@
 @import "./variables.scss";
 
 .contentWrapper {
-  display: inline-block;
   overflow: auto;
   a {
     color: $blue;
   }
-  @media (min-width: $break-large) {
-    width: 960px;
-  }
 }
 
 .content {