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
 ---
 
-<div class="body-container">
 {% include header.html %}
+<div class="body-container">
     {% if page.hide_header or layout.hide_header %}
     {% else %}
     {% if page.title %}

_sass/glitch.scss

@@ -1,7 +1,12 @@
+
+header {
+  max-width: 100vw;
   .stack {
+    overflow: hidden;
     display: grid;
     grid-template-columns: 1fr;
   }
+}
 
 .stack span {
   font-weight: bold;

_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;