Fix horizontal scroll overflow due to header animation

The header is now moved up and outside of the body container, now allowing the header to take up a max of 100% of the viewport width. With overflow set to hidden, the animation will go outside the viewport but won't create a scrollbar anymore.

_layouts/default.html

@@ -2,8 +2,8 @@
 layout: base
 ---
 
+{% include header.html %}
 <div class="body-container">
-    {% include header.html %}
     {% if page.hide_header or layout.hide_header %}
     {% else %}
     {% if page.title %}

_sass/glitch.scss

@@ -1,6 +1,11 @@
-.stack {
+
-  display: grid;
+header {
-  grid-template-columns: 1fr;
+  max-width: 100vw;
+  .stack {
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: 1fr;
+  }
 }
 
 .stack span {

_sass/main.scss

@@ -34,7 +34,7 @@ html {
 }
 
 body {
-  padding: 0 1em;
+  padding: 0;
   font-family: CMU Serif, serif;
   line-height: 1.5;
   background: #0e0e0e;