Now it works. Thanks to Twitch chat for helping me realize that flex-col changes how justify works because that's so fun.

static/input_style.css

@@ -6,15 +6,15 @@ body {
 }
 
 main {
-  @apply flex flex-col gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
+  @apply flex flex-col items-center gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
 }
 
 header {
-  @apply flex flex-col justify-stretch;
+  @apply flex flex-col justify-stretch items-center bg-gray-950;
 }
 
 footer {
-  @apply bg-gray-950 text-gray-50 text-lg flex p-1;
+  @apply bg-gray-950 text-gray-50 text-lg flex justify-center p-1;
 }
 
 @utility sticky-bottom {
@@ -22,7 +22,7 @@ footer {
 }
 
 nav {
-  @apply flex justify-center items-center bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl w-full justify-evenly;
+  @apply flex lg:w-4xl justify-center items-center *:text-gray-50 *:flex-1 *:text-xl w-full justify-evenly;
 }
 
 a {

static/style.css

@@ -290,9 +290,6 @@
   .min-h-screen {
     min-height: 100vh;
   }
-  .w-4xl {
-    width: var(--container-4xl);
-  }
   .w-fit {
     width: fit-content;
   }
@@ -342,9 +339,6 @@
   .items-center {
     align-items: center;
   }
-  .justify-around {
-    justify-content: space-around;
-  }
   .justify-between {
     justify-content: space-between;
   }
@@ -384,9 +378,6 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
-  .justify-self-center {
-    justify-self: center;
-  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -511,6 +502,9 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-2\! {
     padding: calc(var(--spacing) * 2) !important;
   }
@@ -642,6 +636,11 @@
       }
     }
   }
+  .lg\:w-4xl {
+    @media (width >= 64rem) {
+      width: var(--container-4xl);
+    }
+  }
   .dark\:bg-gray-300 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-300);
@@ -674,6 +673,7 @@ main {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
+  align-items: center;
   gap: calc(var(--spacing) * 4);
   background-color: var(--color-gray-200);
   padding: calc(var(--spacing) * 0);
@@ -688,10 +688,13 @@ main {
 header {
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: stretch;
+  background-color: var(--color-gray-950);
 }
 footer {
   display: flex;
+  justify-content: center;
   background-color: var(--color-gray-950);
   padding: calc(var(--spacing) * 1);
   font-size: var(--text-lg);
@@ -704,7 +707,6 @@ nav {
   align-items: center;
   justify-content: center;
   justify-content: space-evenly;
-  background-color: var(--color-gray-950);
   :is(& > *) {
     flex: 1;
   }
@@ -715,6 +717,9 @@ nav {
   :is(& > *) {
     color: var(--color-gray-50);
   }
+  @media (width >= 64rem) {
+    width: var(--container-4xl);
+  }
 }
 a {
   text-decoration-line: underline;

views/layouts/main.html

@@ -35,18 +35,21 @@
   </header>
 
   <main>
+    <div class="lg:w-4xl flex flex-col">
     {{embed}}
+    </div>
   </main>
 
   <footer class="!p-4 !pb-20">
-    <div class="flex-1">
+    <div class="flex lg:w-4xl">
+      <div class="flex-1 p-2">
         <img class="size-12 shrink-0" src="/logo.png" />
         <div>
           <p>I'm the author of many programming education books, a
           semi-professional oil painter, and new game developer.</p>
         </div>
       </div>
-    <div class="flex-1">
+      <div class="flex-1 p-2">
         <h3 class="text-3xl">Other Projects</h3>
         <ul>
           <li><a href="https://learncodethehardway.com/">Learn Code the Hard Way</a></li>
@@ -55,6 +58,7 @@
           <li><a href="https://zedshaw.com/blog/">Personal Essays</a></li>
         </ul>
       </div>
+    </div>
   </footer>
   </body>
 </html>