centered compiles

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="bg-black">
     <div class="w-full flex justify-center">
       <nav class="[&>*]:p-2 text-white bottom-0 right-0 fixed flex justify-center z-50">
         <a href="https://www.youtube.com/channel/UCATtFHnOLDCv8qroi2KW3ZA" target="about:blank" class="mt-1">
@@ -68,8 +68,9 @@
         </section>
       </div>
     </section>
-    <section class="flex bg-black">
-      <zero-a @click="play('ES00A')">
+    <section class="flex justify-center">
+      <div class="flex max-w-2xl">
+        <zero-a @click="play('ES00A')">
         <button class="button absolute object-center p-4 flex justify-center items-center">
           <svg width="40px" height="30px">
             <polygon points="0,0 0,30 30,15" />
@@ -77,6 +78,7 @@
         </button>
       </zero-a>
       <zero-b @click="play('ES00B')"></zero-b>
+      </div>
     </section>
   </div>
 </template>