more style fixin.

src/pages/event/[post].astro

@@ -49,27 +49,29 @@ const { post } = Astro.props
 ---
 
 <DefaultLayout title={post.title} description={post.body} url={post.title}>
-  <div class="container bg-white bg-opacity-90">
-    <div class="mt-12 pt-4">
-      <Breadcrumbs>
-        <BreadcrumbsItem href="/" label="Hem" />
-        <BreadcrumbsItem href="/event" label="Evenemang" />
-        <BreadcrumbsItem currentPage={true} label={post.title} />
-      </Breadcrumbs>
-    </div>
-
-  <section class="my-12">
-    <div class="container">
-      <Media class="w-full" src={post.image.url} />
-    </div>
-  </section>
-  <section class="my-12 ">
-    <div class="container">
-      <h1>{post.title}</h1><br />
-      <p>Evenemanget startar: {post.eventStartDate}</p>
-      <p class="text-2xl pb-8">{post.body}</p>
-    </div>
-  </section>
+  <div class="container">
+    <div class="container bg-white bg-opacity-90">
+      <div class="mt-12 pt-4">
+        <Breadcrumbs>
+          <BreadcrumbsItem href="/" label="Hem" />
+          <BreadcrumbsItem href="/event" label="Evenemang" />
+          <BreadcrumbsItem currentPage={true} label={post.title} />
+        </Breadcrumbs>
+      </div>
+
+    <section class="my-12">
+      <div class="container">
+        <Media class="w-full" src={post.image.url} />
+      </div>
+    </section>
+    <section class="my-12 ">
+      <div class="container">
+        <h2>{post.title}</h1><br />
+        <p>Evenemanget startar: {post.eventStartDate}</p><br />
+        <p class="text-1xl pb-8">{post.body}</p>
+      </div>
+    </section>
+  </div>
 </div>
 </DefaultLayout>
 
@@ -85,10 +87,12 @@ const { post } = Astro.props
     @media (min-width: 550px) {
       grid-template-columns: repeat(2, 1fr);
       grid-gap: 2rem;
+      margin: 1rem auto;
     }
 
     @media (min-width: 950px) {
       grid-template-columns: repeat(3, 1fr);
+      margin: 1rem auto;
     }
   }
 </style>