Fix blog post header overlap with !important overrides

Author: Clemens Vasters

assets/css/style.scss

@@ -190,43 +190,54 @@ body {
 /* Blog post page styles */
 .blog-post {
   position: relative;
+  overflow: visible;
 }
 
 .blog-post article {
   display: block;
+  position: relative;
 }
 
+.blog-post article header,
 .blog-post .post-header {
   margin-bottom: 30px;
   padding-bottom: 20px;
   border-bottom: 1px solid #e0e0e0;
-  position: relative;
-  display: block;
+  position: relative !important;
+  display: block !important;
   clear: both;
+  float: none !important;
+  width: 100% !important;
 }
 
+.blog-post h1.post-title,
 .blog-post .post-title {
-  font-size: 2em;
-  margin: 0 0 10px 0;
-  padding: 0;
-  color: #333;
-  line-height: 1.2;
-  display: block;
+  font-size: 2em !important;
+  margin: 0 0 15px 0 !important;
+  padding: 0 !important;
+  color: #333 !important;
+  line-height: 1.3 !important;
+  display: block !important;
+  position: relative !important;
+  float: none !important;
 }
 
 .blog-post .post-meta {
-  color: #666;
-  font-size: 14px;
-  margin: 0;
-  padding: 0;
-  display: block;
+  color: #666 !important;
+  font-size: 14px !important;
+  margin: 0 0 0 0 !important;
+  padding: 0 !important;
+  display: block !important;
   clear: both;
+  position: relative !important;
+  float: none !important;
 }
 
 .blog-post .post-content {
   line-height: 1.7;
   display: block;
   clear: both;
+  position: relative;
 }
 
 .blog-post .post-content h2 {