fixed margin overflow for h1-h12

fixed it for probably way to many h tags but i'd like this a bit over kill then missing existing ones

dist/ef19487056b129c8f3eda17f9543ab70.css

@@ -10,7 +10,43 @@ body {
 main {
   z-index: 980;
   position: relative;
-  top: 6em; }
+  top: 5em; }
+
+h1 {
+  margin: 10px; }
+
+h2 {
+  margin: 10px; }
+
+h3 {
+  margin: 10px; }
+
+h4 {
+  margin: 10px; }
+
+h5 {
+  margin: 10px; }
+
+h6 {
+  margin: 10px; }
+
+h7 {
+  margin: 10px; }
+
+h8 {
+  margin: 10px; }
+
+h9 {
+  margin: 10px; }
+
+h10 {
+  margin: 10px; }
+
+h11 {
+  margin: 10px; }
+
+h12 {
+  margin: 10px; }
 
 .dev {
   border: 1px solid black; }

dist/index.html

@@ -25,7 +25,7 @@
         </header>
         <main>
             <div class="container">
-                <h1>css grid</h1>
+                <h1 style="text-align: center;">CSS Grid</h1>
                 <div class="row">
                     <div class="col-12 display"><h1>12</h1></div>
                     <div class="col-11 display"><h1>11</h1></div>

src/index.html

@@ -25,7 +25,7 @@
         </header>
         <main>
             <div class="container">
-                <h1>css grid</h1>
+                <h1 style="text-align: center;">CSS Grid</h1>
                 <div class="row">
                     <div class="col-12 display"><h1>12</h1></div>
                     <div class="col-11 display"><h1>11</h1></div>

src/scss/main.sass

@@ -13,7 +13,11 @@ body
 main
   z-index: 980
   position: relative
-  top: 6em
+  top: 5em
+// header classes margin fix
+@for $i from 1 through 12
+     h#{$i}
+       margin: 10px
 // Dev Classes
 .dev
   border: 1px solid black
@@ -38,8 +42,6 @@ div[class^="col-"]
     flex: 0 0 100% / $columns * $i
   .col-offset-#{$i}
     margin-left: 100% / $columns * $i
-// alert classes
-  
 // Navigation
 header
   background: $navBG