add logo container to header, fix centering issues. add section css

src/css/layout/_header.scss

@@ -2,10 +2,11 @@
 /* Header */
 
   #header {
-    top: 80px;
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 70px);
+    margin-top: 80px;
+    > #logo-container {
+      width: max-content;
+      margin: auto;
+      padding: 2em 1em;
 
       > h1 {
         font-size: 60pt;
@@ -25,6 +26,7 @@
         display: inline-block;
         float: left;
       }
+    }
     /*
         @include breakpoint('<=xlarge') {
 
@@ -35,7 +37,7 @@
         }
     */
         @include breakpoint('<=medium') {
-          top: 60px;
+          margin-top: 60px;
         }
     /*
         @include breakpoint('<=small') {

src/css/layout/_main.scss

@@ -2,7 +2,14 @@
 /* Main */
 
   #main {
+    width: 100%;
 
+    > section {
+      height: 400px;
+      width: 100%;
+      max-width: 600px;
+      margin: 8em auto 4em;
+    }
     /*
         @include breakpoint('<=xlarge') {
 

src/css/layout/_nav.scss

@@ -6,6 +6,7 @@
       'height #{_duration(transition)} ease',
       'background #{_duration(transition)} ease',
     ));
+    top: 0;
     height: 80px;
     position: fixed;
     width: 100%;

src/css/main.scss

@@ -45,6 +45,7 @@
     @import 'layout/header';
     @import 'layout/nav';
     @import 'layout/footer';
+    @import 'layout/main';
 
 body {
   background: #f2f2f2;

src/index.html

@@ -76,6 +76,7 @@
 </nav>
 
 <header id="header">
+  <div id="logo-container">
     <h1>
       <span style="color:#e3201b;">S</span><span style="color:#e2241a;">c</span><span style="color:#e0281a;">h</span><span style="color:#df2c19;">u</span><span style="color:#dd3118;">l</span><span style="color:#dc3518;">z</span><span style="color:#da3917;">e</span>
     </h1>
@@ -87,6 +88,7 @@
     <h1>
       <span style="color:#f79923;">S</span><span style="color:#f9a023;">t</span><span style="color:#faa623;">u</span><span style="color:#fcad24;">d</span><span style="color:#fdb324;">i</span><span style="color:#ffba24;">o</span>
     </h1>
+  </div>
 </header>
 
 <div id="main">