diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx
index cd4f9648c27e4..1ee913371d7b3 100644
--- a/layouts/New/Blog.tsx
+++ b/layouts/New/Blog.tsx
@@ -39,19 +39,21 @@ const BlogLayout: FC = async () => {
   return (
     <>
       <WithNavBar />
-      <main className={styles.blogLayout}>
-        <BlogHeader category={blogData.category} />
-        <WithBlogCategories
-          blogData={blogData}
-          categories={mapCategoriesToTabs([
-            'all',
-            'announcements',
-            'release',
-            'vulnerability',
-            'events',
-          ])}
-        />
-      </main>
+      <div className={styles.blogLayout}>
+        <main>
+          <BlogHeader category={blogData.category} />
+          <WithBlogCategories
+            blogData={blogData}
+            categories={mapCategoriesToTabs([
+              'all',
+              'announcements',
+              'release',
+              'vulnerability',
+              'events',
+            ])}
+          />
+        </main>
+      </div>
       <WithFooter />
     </>
   );
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
index ea4a5b3c64b0e..470af0beb2447 100644
--- a/layouts/New/layouts.module.css
+++ b/layouts/New/layouts.module.css
@@ -142,15 +142,19 @@
   @apply flex
     w-full
     justify-center
-    gap-4
     bg-gradient-subtle
-    px-4
-    py-12
     dark:bg-gradient-subtle-dark
-    md:px-14
-    lg:px-28
     xs:bg-none
     xs:dark:bg-none;
+
+  main {
+    @apply max-w-8xl
+      gap-4
+      px-4
+      py-12
+      md:px-14
+      lg:px-28;
+  }
 }
 
 .contentLayout {