Added container to about page

components/calendar/state/yearly/Layout.vue

@@ -24,7 +24,7 @@ const moveCalendarRight = useThrottleFn(() => {
 </script>
 
 <template>
-  <div class="container mt-[10vh] mb-auto" @wheel="handleWheel">
+  <div class="container mx-auto mt-[10vh] mb-auto" @wheel="handleWheel">
     <div class="grid grid-cols-5 gap-x-8 gap-y-16">
       <CalendarStateYearlyMonthTile
         v-for="month in months"

pages/about.vue

@@ -14,12 +14,14 @@ watch(locale, () => refresh())
       <Title>{{ $t("pages.about.title") }}</Title>
     </Head>
 
-    <Spacing size="lg">
-      <Heading level="h1">
-        {{ $t("pages.about.title") }}
-      </Heading>
+    <div class="container">
+      <Spacing size="lg">
+        <Heading level="h1">
+          {{ $t("pages.about.title") }}
+        </Heading>
 
-      <ContentRenderer v-if="page" :value="page" class="content" />
-    </Spacing>
+        <ContentRenderer v-if="page" :value="page" class="content" />
+      </Spacing>
+    </div>
   </main>
 </template>

tailwind.config.js

@@ -16,7 +16,6 @@ module.exports = {
 
   theme: {
     container: {
-      center: true,
       padding: "2rem",
       screens: {
         "2xl": "1400px",