fix: layout

src/app/art/page.tsx

@@ -16,7 +16,7 @@ const Arts = (): JSX.Element => {
   return (
     <main
       className="w-[95%] text-center
-      max-w-4xl m-auto mt-16 mb-16 rounded-lg"
+      max-w-4xl mx-auto mt-16 rounded-lg"
     >
       <h1 className="text-5xl">{`Art`}</h1>
       <section>

src/app/games/page.tsx

@@ -16,7 +16,7 @@ const Gamez = (): JSX.Element => {
   return (
     <main
       className="w-[95%] text-center
-      max-w-4xl m-auto mt-16 mb-16 rounded-lg"
+      max-w-4xl mx-auto mt-16 rounded-lg"
     >
       <h1 className="text-5xl">{`Games`}</h1>
       <section>

src/app/koikatsu/page.tsx

@@ -16,9 +16,9 @@ const KoikatsuPage = (): JSX.Element => {
   return (
     <main
       className="w-[95%] text-center
-      max-w-4xl m-auto mt-16 mb-16 rounded-lg"
+      max-w-4xl mx-auto mt-16 rounded-lg"
     >
-      <h1 className="text-5xl">{`Koikatsu`}</h1>
+      <h1 className="text-5xl">{` Koikatsu`}</h1>
       <section>
         <p className="mb-2">{`Images of Naomi generated in Koikatsu. Note that the list of images is dynamically generated, so we aren't able to provide alt text for these.`}</p>
         <Rule />

src/app/legacy/page.tsx

@@ -121,7 +121,7 @@ const Legacy = (): JSX.Element => {
   };
 
   return (
-    <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+    <main className="w-4/5 text-center max-w-4xl mx-auto mt-16 rounded-lg">
       <h1 className="text-5xl">{`The Carrigan Legacy`}</h1>
       <section>
         <Image alt="Nine anime-style female characters with diverse colorful outfits including dresses, crop tops, skirts, and pants, posing together against a light background, some making peace signs or pointing at the viewer" height="1080" src={`https://cdn.nhcarrigan.com/characters/landscape/legacy.png`} width="1920"></Image>

src/app/naomi/page.tsx

@@ -13,7 +13,7 @@ import { NaomiNavItems } from "../../config/NavItems";
  */
 const Naomi = (): JSX.Element => {
   return (
-    <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+    <main className="w-4/5 text-center max-w-4xl mx-auto mt-16 rounded-lg">
       <h1 className="text-4xl mb-2">{`Naomi Carrigan`}</h1>
       <Image
         alt="Naomi Carrigan"

src/app/page.tsx

@@ -13,7 +13,7 @@ import { NavItems } from "../config/NavItems";
  */
 const Home = (): JSX.Element => {
   return (
-    <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+    <main className="w-4/5 text-center max-w-4xl mx-auto mt-16 rounded-lg">
       <h1 className="text-4xl mb-2">{`NHCarrigan`}</h1>
       <Image
         alt="NHCarrigan"

src/app/ref/page.tsx

@@ -106,7 +106,7 @@ const Reference = (): JSX.Element => {
   }, [ camera ]);
 
   return (
-    <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+    <main className="w-4/5 text-center max-w-4xl mx-auto mt-16 rounded-lg">
       <h1 className="text-5xl">{`Reference`}</h1>
       <section>
         <p className="mb-2">{`Want to draw art of Naomi? Here's a fully interactive reference page with all of her model's outfits!`}</p>

src/app/tech/page.tsx

@@ -15,7 +15,7 @@ const PlayPage = (): JSX.Element => {
   return (
     <main
       className="w-[95%] text-center
-    max-w-4xl m-auto mt-16 mb-16 rounded-lg"
+    max-w-4xl mx-auto mt-16 rounded-lg"
     >
       <h1 className="text-5xl">{`Technologies`}</h1>
       <p className="mb-2">