fix all pages main width

app/blog/layout.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 
 export default function PageLayout({ children }: { children: ReactNode }) {
   return (
-    <main className="max-w-4xl mx-auto lg:w-[56rem]">
+    <main className="w-full max-w-4xl mx-auto">
       <h1
         className={clsx(
           'text-5xl font-bold text-center font-Barlow',

app/g/layout.tsx

@@ -9,7 +9,7 @@ export default async function PageLayout({
 }) {
   return (
     <>
-      <main className="max-w-5xl px-4 mx-auto lg:px-0">
+      <main className="w-full max-w-5xl px-4 mx-auto lg:px-0">
         <div className="pb-4 text-sm">{children}</div>
       </main>
     </>

app/gists/layout.tsx

@@ -15,7 +15,7 @@ export default async function PageLayout({
 }) {
   return (
     <>
-      <main className="max-w-5xl px-4 mx-auto lg:px-0">
+      <main className="w-full max-w-5xl px-4 mx-auto lg:px-0">
         <div className="md:flex">
           <Suspense fallback={<UserInfoLoading />}>
             <UserInfo />

app/projects/page.tsx

@@ -14,7 +14,9 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <main className="flex-1 max-w-4xl px-8 py-8 mx-auto lg:px-0">
+      <main
+        className={clsx('flex-1 max-w-4xl px-8 py-8 mx-auto', 'lg:px-0 w-full')}
+      >
         <div>
           {/* Git projects */}
           <div>

components/pages/gists/file-content-skeleton.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 export default function FileContentLoading() {
   return (
-    <div className={clsx('pb-4')}>
+    <div className={clsx('pb-4 w-full')}>
       {/* Username */}
       <h1
         className={clsx(