diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 8260af1..44f8ce6 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -19,7 +19,7 @@ const { image, title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.prop
       <input id="my-drawer" type="checkbox" class="drawer-toggle" />
       <div class="drawer-content flex flex-col bg-base-100">
         <Header title={SITE_TITLE} />
-        <div class="flex justify-center">
+        <div class="md:flex md:justify-center">
           <main class="p-6 pt-10 max-w-[900px]">
             <slot />
           </main>
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
index 56d91a6..708d856 100644
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@@ -18,7 +18,7 @@ const {
 ---
 
 <BaseLayout title={title} description={description} image={heroImage}>
-  <main class="flex justify-center">
+  <main class="md:flex md:justify-center">
     <article class="prose prose-lg max-w-[750px] prose-img:mx-auto">
       {heroImage && <img src={heroImage} alt={title} class="w-full mb-6" />}
       <h1 class="title my-2 text-4xl font-bold">{title}</h1>