Flex it

src/components/About.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react'
 import { Spinner, Header } from '.'
 import '../static/stylesheets/globals.scss'
 import contentStyle from '../static/stylesheets/content.scss'
+import style from './About.scss'
 import MarkdownIt from 'markdown-it'
 
 export default class About extends Component {
@@ -24,7 +25,7 @@ export default class About extends Component {
     }
 
     return (
-      <div className={contentStyle.contentWrapper} id="about">
+      <div className={contentStyle.contentWrapper, style.about} >
         <Header header={'About Me'} />
         <div className={contentStyle.content} dangerouslySetInnerHTML={{ __html: result }}>
         </div>

src/components/About.scss

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

src/components/Blog.js

@@ -35,7 +35,7 @@ export default class Blog extends Component {
     )
 
     return (
-      <div className={contentStyle.contentWrapper} id="blog">
+      <div className={contentStyle.contentWrapper, styles.blog} id="blog">
         <Header header={'Blog'} />
 
         <div className={contentStyle.content}>

src/components/Blog.scss

@@ -22,3 +22,7 @@
     vertical-align: top;
   }
 }
+
+.blog {
+  flex: 70%;
+}

src/components/Wrapper.scss

@@ -5,5 +5,7 @@
 }
 
 .flexWrap {
+  @media only screen and (min-width: 1024px) {
     display: flex;
+  }
 }