Fix styling issues

src/components/Blog.js

@@ -16,14 +16,14 @@ export default class Blog extends Component {
     }
 
     let posts = this.props.posts.map((post) =>
-      <div className={styles.postListItem} key={post.title}>
-        <div className={styles.postHeader}>
-          <div className={styles.post}>
-            <span>{post.published}</span>
-            <a href={post.link}>{post.title}</a>
-          </div>
-        </div>
-      </div>
+      <tr className={styles.postListItem} key={post.title}>
+        <td>
+          <span className={styles.postDate}>{post.published}</span>
+        </td>
+        <td>
+          <a href={post.link} className={styles.postTitle}>{post.title}</a>
+        </td>
+      </tr>
     )
 
     return (
@@ -31,9 +31,11 @@ export default class Blog extends Component {
         <Header header={"Blog"} />
 
         <div className={contentStyle.content}>
-          <div className={styles.postsWrapper}>
-            {posts}
-          </div>
+          <table>
+            <tbody className={styles.postsWrapper}>
+              {posts}
+            </tbody>
+          </table>
         </div>
 
       </div>

src/components/Blog.scss

@@ -1,29 +1,21 @@
 @import "../static/stylesheets/variables.scss";
 
-.post {
-  display: inline-block;
-  float: left;
-  span {
-    margin-right: 30px;
-  }
-  a {
-    color: $blue;
-    text-decoration: none;
-    text-transform: capitalize;
-    font-family: $font-header;
-    font-size: 1.2em;
-  }
+.postDate {
+  margin-right: 50px;
+}
+
+.postTitle {
+  color: $blue;
+  text-decoration: none;
+  text-transform: capitalize;
+  font-family: $font-header;
+  font-size: 1.2em;
 }
 
 .postsWrapper {
   margin-top: 20px;
 }
 
-.postHeader {
-	overflow: hidden;
-	padding: 0 5px 0 5px;
-}
-
 .postListItem {
 	margin: 8px;
 }

src/components/Post.scss

@@ -2,6 +2,9 @@
 
 .postContent {
   clear: both;
+  h1,h2,h2,h4,h5,h6 {
+    color: $black;
+  }
 }
 
 .postDate {