force header width to be equal to container width

_layouts/post.html

@@ -36,5 +36,6 @@
 </main>
 <script data-goatcounter="https://goatcounter.shr4pnel.com/count" async="" src="https://goatcounter.shr4pnel.com/count.js"></script>
 <script src="/assets/js/get-correct-path.js"></script>
+<script src="/assets/js/width-hack.js"></script>
 </body>
 </html>

_layouts/shr4pnel.html

@@ -427,5 +427,6 @@
     </div>
 </main>
 <script src="/assets/js/quote.js"></script>
+<script src="/assets/js/width-hack.js"></script>
 </body>
 </html>

assets/css/index.css

@@ -50,7 +50,7 @@ p > img {
 
 .title-container {
     width: fit-content;
-    padding: 0 5%;
+    padding: 0;
 }
 
 .logo {

assets/css/post.css

@@ -59,13 +59,15 @@ footer > a {
 
 .title-container {
     width: fit-content;
-    padding: 0 5%;
+    padding: 0;
+    border-bottom: white;
 }
 
 .logo {
     letter-spacing: 5px;
     text-shadow: -4px 3px green;
     text-align: center;
+    margin-bottom: 0;
 }
 
 .highlighted {
@@ -112,6 +114,11 @@ footer > a {
     display: block;
 }
 
+main > .container {
+    margin-top: 0;
+    border-top: white;
+}
+
 @media only screen and (max-width: 467px) {
     .container {
         margin: 10px auto 0;
@@ -134,10 +141,6 @@ footer > a {
     .highlighted {
         padding: 5px 15px;
     }
-
-    .title-container {
-        padding: 5px;
-    }
 }
 
 .ducks {

assets/js/width-hack.js

@@ -0,0 +1,9 @@
+const resizeHeader = () => {
+    const container = document.querySelector("main > .container")
+    const containerWidth = container.scrollWidth
+    const header = document.querySelector(".container.title-container")
+    header.style.setProperty("min-width", `${containerWidth}px`)
+}
+
+window.addEventListener("resize", resizeHeader)
+resizeHeader()