diff --git a/themes/matery/components/Announcement.js b/themes/matery/components/Announcement.js
index c4d99f97..d1ad1ac3 100644
--- a/themes/matery/components/Announcement.js
+++ b/themes/matery/components/Announcement.js
@@ -8,22 +8,22 @@ const Announcement = ({ notice }) => {
   if (!notice) {
     return <></>
   }
-  return <>
+  return <div className="px-3 w-full">
         <div
             data-aos="zoom-in"
             data-aos-duration="500"
             data-aos-once="true"
             data-aos-anchor-placement="top-bottom"
-            className="w-full mb-4 p-2 overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
-        <div className="text-sm flex flex-nowrap justify-between">
-            <div className="font-light text-gray-600  dark:text-gray-200">
-                <i className="mx-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
+            className="mb-4 p-2 overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
+            <div className="text-sm flex flex-nowrap justify-between">
+                <div className="font-light text-gray-600  dark:text-gray-200">
+                    <i className="mx-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
+                </div>
             </div>
+            {notice && (<div id="announcement-content">
+                <NotionPage post={notice} className='text-center ' />
+            </div>)}
         </div>
-        {notice && (<div id="announcement-content">
-            <NotionPage post={notice} className='text-center ' />
-        </div>)}
-        </div>
-    </>
+    </div>
 }
 export default Announcement