padding fix

components/Navbar.tsx

@@ -13,7 +13,7 @@ export const Navbar = () => {
   const [showMenu, setShowMenu] = useState(false);
 
   return (
-    <nav className="p-4 mx-6 flex flex-row justify-between">
+    <nav className="py-4 xl:px-10 px-4 flex flex-row justify-between">
       <Link
         href="/"
         id="logo"

layouts/MainLayout.tsx

@@ -3,9 +3,9 @@ import { Navbar } from "../components/Navbar";
 
 export const MainLayout = ({ children }: PropsWithChildren) => {
   return (
-    <div className="w-11/12 lg:w-2/3 m-auto overflow-x-hidden">
+    <div>
       <Navbar />
-      <main className="xl:p-10 p-6 xl:mt-10">{children}</main>
+      <main className="xl:p-10 p-4 xl:mx-0">{children}</main>
     </div>
   );
 };

pages/blog/index.tsx

@@ -41,7 +41,7 @@ const BlogCard = ({ blog, slug }: { blog: BasicBlogProps; slug: string }) => {
 const Blog = ({ posts }: { posts: BlogPost[] }) => {
   return (
     <MainLayout>
-      <h1 className="text-3xl font-bold xl:mt-10">Blog</h1>
+      <h1 className="text-3xl font-bold">Blog</h1>
       <div className="w-full h-0.5 bg-white/50 my-4 rounded-full" />
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {posts.map((post, index) => (

styles/globals.css

@@ -3,5 +3,5 @@
 @import "tailwindcss/utilities";
 
 body {
-  @apply dark:bg-gradient-dark dark:text-primary-text bg-white text-gradient-dark;
+  @apply dark:bg-gradient-dark dark:text-primary-text bg-white text-gradient-dark xl:w-2/3 w-11/12 mx-auto;
 }

tailwind.config.js

@@ -15,7 +15,7 @@ module.exports = {
         secondary: "#FFE600",
         "primary-text": "#D9D9D9",
       },
-    }
+    },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require("@tailwindcss/typography")],
 };