added some weird fixes to prevent navbar overlapping

dist/ef19487056b129c8f3eda17f9543ab70.css

@@ -7,6 +7,11 @@ body {
   background: #f1f1f1;
   font-family: sans-serif; }
 
+main {
+  z-index: 980;
+  position: relative;
+  top: 6em; }
+
 .dev {
   border: 1px solid black; }
 
@@ -104,8 +109,11 @@ header {
   background: #dfdfdf;
   text-align: center;
   position: fixed;
+  height: 30px;
   z-index: 999;
-  width: 100%; }
+  width: 100%;
+  height: auto;
+  top: 0; }
 
 .nav-toggle {
   display: none; }

dist/ef19487056b129c8f3eda17f9543ab70.js

@@ -149,7 +149,7 @@ function Module() {
 module.bundle.Module = Module;
 
 if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
-  var ws = new WebSocket('ws://localhost:56486/');
+  var ws = new WebSocket('ws://localhost:58854/');
   ws.onmessage = function(event) {
     var data = JSON.parse(event.data);
 

dist/index.html

@@ -23,10 +23,25 @@
                 </ul>
             </nav>
         </header>
-        <div class="container">
+        <main>
-            <div class="row">
+            <div class="container">
-                <div class="col-4"><h1>test</h1></div>
+                <h1>css grid</h1>
+                <div class="row">
+                    <div class="col-12 display"><h1>12</h1></div>
+                    <div class="col-11 display"><h1>11</h1></div>
+                    <div class="col-1 display"><h1>1</h1></div>
+                    <div class="col-10 display"><h1>10</h1></div>
+                    <div class="col-2 display"><h1>2</h1></div>
+                    <div class="col-9 display"><h1>9</h1></div>
+                    <div class="col-3 display"><h1>3</h1></div>
+                    <div class="col-8 display"><h1>8</h1></div>
+                    <div class="col-4 display"><h1>4</h1></div>
+                    <div class="col-7 display"><h1>7</h1></div>
+                    <div class="col-5 display"><h1>5</h1></div>
+                    <div class="col-6 display"><h1>6</h1></div>
+                    <div class="col-6 display"><h1>6</h1></div>
+                </div>
             </div>
-        </div>
+        </main>
     </body>
 </html>

src/index.html

@@ -23,10 +23,25 @@
                 </ul>
             </nav>
         </header>
-        <div class="container">
+        <main>
-            <div class="row">
+            <div class="container">
-                <div class="col-4"><h1>test</h1></div>
+                <h1>css grid</h1>
+                <div class="row">
+                    <div class="col-12 display"><h1>12</h1></div>
+                    <div class="col-11 display"><h1>11</h1></div>
+                    <div class="col-1 display"><h1>1</h1></div>
+                    <div class="col-10 display"><h1>10</h1></div>
+                    <div class="col-2 display"><h1>2</h1></div>
+                    <div class="col-9 display"><h1>9</h1></div>
+                    <div class="col-3 display"><h1>3</h1></div>
+                    <div class="col-8 display"><h1>8</h1></div>
+                    <div class="col-4 display"><h1>4</h1></div>
+                    <div class="col-7 display"><h1>7</h1></div>
+                    <div class="col-5 display"><h1>5</h1></div>
+                    <div class="col-6 display"><h1>6</h1></div>
+                    <div class="col-6 display"><h1>6</h1></div>
+                </div>
             </div>
-        </div>
+        </main>
     </body>
 </html>

src/scss/main.sass

@@ -9,6 +9,11 @@ body
   padding: 0
   background: $primBG
   font-family: sans-serif
+// Nav Overlapping fix
+main
+  z-index: 980
+  position: relative
+  top: 6em
 // Dev Classes
 .dev
   border: 1px solid black
@@ -33,13 +38,18 @@ div[class^="col-"]
     flex: 0 0 100% / $columns * $i
   .col-offset-#{$i}
     margin-left: 100% / $columns * $i
+// alert classes
+  
 // Navigation
 header
   background: $navBG
   text-align: center
   position: fixed
+  height: 30px
   z-index: 999
   width: 100%
+  height: auto
+  top: 0
 .nav-toggle
   display: none
 .nav-toggle-label
@@ -130,4 +140,4 @@ nav a:hover
     align-items: center
   .nav-left ul
     display: flex
-    justify-content: flex-end
+    justify-content: flex-end