diff --git a/apps/blogai/components/article/article.tsx b/apps/blogai/components/article/article.tsx
index a1a3c1b..27e6717 100644
--- a/apps/blogai/components/article/article.tsx
+++ b/apps/blogai/components/article/article.tsx
@@ -559,7 +559,7 @@ const Article = () => {
   }, [])
 
   return (
-    <div className='min-h-[25rem]'>
+    <div className='min-h-[25rem] w-full'>
       <FadeIn >
         <h3 className='text-center text-[1.25rem] lg:text-[2.25rem] font-bold py-8'>{t("article.hot_hrends")}</h3>
       </FadeIn>
diff --git a/apps/blogai/components/header.tsx b/apps/blogai/components/header.tsx
index 2e23fc6..da38f11 100644
--- a/apps/blogai/components/header.tsx
+++ b/apps/blogai/components/header.tsx
@@ -60,7 +60,7 @@ export function Header() {
   }
 
   return (
-    <header className="sticky top-0 z-50 flex shrink-0 items-center justify-between  bg-background px-4 py-[1.5rem] mx-auto">
+    <header className="sticky top-0 z-50 flex shrink-0 items-center justify-between  bg-background px-4 py-[1.5rem] w-11/12 sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-3/5 2xl:w-1/2  mx-auto">
       <LogoAI
         className='flex text-center ml-0'
       />