diff --git a/components/NotionPage.js b/components/NotionPage.js
index b0c58f5c..f9a58f64 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -47,7 +47,7 @@ const NotionPage = ({ post }) => {
     }
   }
 
-  return <div id='container'>
+  return <div id='container' className='max-w-4xl mx-auto'>
     <NotionRenderer
       recordMap={post.blockMap}
       mapPageUrl={mapPageUrl}
diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js
index d7fdbf2b..0843646d 100644
--- a/themes/hexo/LayoutBase.js
+++ b/themes/hexo/LayoutBase.js
@@ -62,13 +62,14 @@ const LayoutBase = props => {
       <main id="wrapper" className="w-full py-8 md:px-8 xl:px-24 min-h-screen">
         <div
           id="container-inner"
-          className="pt-14 w-full mx-auto lg:flex justify-center lg:space-x-4"
+          className="pt-14 w-full mx-auto xl:flex xl:space-x-4 justify-center"
         >
-          <div className="flex-grow w-full">
+          <div className="w-full">
             {onLoading ? <LoadingCover /> : children}
           </div>
-
-          <SideRight {...props} slot={rightAreaSlot} />
+          <div className='xl:w-96 xl:pt-0 xl:px-2 pt-4'>
+            <SideRight {...props} slot={rightAreaSlot} />
+          </div>
         </div>
       </main>
 
diff --git a/themes/hexo/LayoutSlug.js b/themes/hexo/LayoutSlug.js
index e914a191..ce832a68 100644
--- a/themes/hexo/LayoutSlug.js
+++ b/themes/hexo/LayoutSlug.js
@@ -58,7 +58,7 @@ export const LayoutSlug = props => {
 
           <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased" >
             {/* Notion文章主体 */}
-            <section id='notion-article' className='px-5'>
+            <section id='notion-article' className='px-5 justify-center mx-auto'>
               {post && <NotionPage post={post} />}
             </section>
 
diff --git a/themes/hexo/components/SideRight.js b/themes/hexo/components/SideRight.js
index 7d690632..b730d558 100644
--- a/themes/hexo/components/SideRight.js
+++ b/themes/hexo/components/SideRight.js
@@ -13,7 +13,7 @@ export default function SideRight(props) {
   } = props
 
   return (
-    <div className={'lg:w-80 px-2 space-y-4 pt-4 lg:pt-0'}>
+    <div className={'space-y-4'}>
       <InfoCard {...props} />
       {CONFIG_HEXO.WIDGET_ANALYTICS && <AnalyticsCard {...props} />}