Adjust margins on heading

templates/article.html

@@ -68,16 +68,16 @@
     </div>
   </div>
   <div class="w-layout-vflex flex-block-2 purple" style="background-color:#552a85">
-    <div id="header-elements" style="align-items: flex-start">
-      <h1 class="heading-8" style="font-size: 72px; margin-top: 20px;">{{title}}</h1>
-      <div class="w-layout-hflex flex-block-3" style="margin-bottom: 10px;">
+    <div id="header-elements">
+      <h1 class="heading-8">{{title}}</h1>
+      <div class="w-layout-hflex flex-block-3">
         {% for author in authors %}
         <img src="{{author.avatar_url}}" loading="lazy" width="32" height="32" alt="{{author.full_name}}'s Avatar"
           class="image">
         <div class="text-block-2">{{author.full_name}}</div>
         {% endfor %}
       </div>
-      <p class="text-block-2" style="margin-left: 20px;margin-bottom: 25px;margin-top:20px;font-size: 16px">
+      <p class="text-block-2" style="font-size: 16px">
         {{read_time}} minute read · Published: {{published}}
       </p>
     </div>

templates/css/compute-c23f91.webflow.css

@@ -12,12 +12,6 @@ code {
   font-family: 'Fira Code', monospace;
 }
 
-.w-layout-vflex {
-  flex-direction: column;
-  align-items: flex-start;
-  display: flex;
-}
-
 .w-layout-blockcontainer {
   max-width: 940px;
   margin-left: auto;
@@ -135,9 +129,8 @@ li {
 }
 
 .flex-block-2.purple {
-  flex-flow: column;
-  justify-content: space-around;
   padding-top: 0;
+  align-items: center;
   display: flex;
   background-color: #552a85;
   overflow-x: hidden;
@@ -214,9 +207,8 @@ li {
   background-image: linear-gradient(90deg, #f6c415, rgba(246, 196, 21, .3));
   -webkit-background-clip: text;
   background-clip: text;
+  font-size: 64px;
   margin-bottom: 20px;
-  margin-left: 20px;
-  margin-right: 20px;
 }
 
 .image {
@@ -224,7 +216,6 @@ li {
   background-clip: border-box;
   border-radius: 50%;
   margin-bottom: 0;
-  margin-left: 20px;
   margin-right: 10px;
 }
 
@@ -244,8 +235,12 @@ article>* {
 }
 
 #header-elements {
-  width: 96vw;
   max-width: 940px;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  margin: 14px 20px;
+  align-items: flex-start;
 }
 
 @media screen and (max-width: 991px) {
@@ -265,11 +260,6 @@ article>* {
   .grid {
     grid-template-columns: 1fr;
   }
-
-  .heading-8 {
-    margin-bottom: 20px;
-    font-size: 64px;
-  }
 }
 
 @media screen and (max-width: 767px) {
@@ -290,10 +280,6 @@ article>* {
   .heading-3.unwrapped-compute.compute-gradiant {
     display: none;
   }
-
-  .heading-8 {
-    font-size: 64px;
-  }
 }
 
 @media screen and (max-width: 479px) {