diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 05d556a..e59ed0a 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -45,7 +45,7 @@ const Banner = () => {
   }, []);
 
   return (
-    <div className="relative flex h-[184px] w-full">
+    <div className="relative h-[184px] w-screen max-w-[500px]">
       <Link
         to={order === 0 ? "/mbti-test" : `/contents/${order}`}
         className="absolute h-full w-full"
@@ -67,11 +67,11 @@ const Banner = () => {
             )}
           >
             <source media="(min-width: 500px)" srcSet={image.lg} />
-            <source media="(min-width: 375px)" srcSet={image.md} />
+            <source media="(min-width: 375px)" srcSet={image.sm} />
             <img
               src={image.sm}
               alt={image.description}
-              className="h-full w-full object-cover"
+              className="h-full w-full"
             />
           </picture>
         ))}
diff --git a/src/components/CenteredLayout.tsx b/src/components/CenteredLayout.tsx
index c454d3b..1d8bfac 100644
--- a/src/components/CenteredLayout.tsx
+++ b/src/components/CenteredLayout.tsx
@@ -6,7 +6,9 @@ interface CenteredLayoutProps {
 
 const CenteredLayout = ({ children }: CenteredLayoutProps) => (
   <div className="flex min-h-screen w-screen justify-center bg-gray-50">
-    <div className="flex w-full justify-center bg-gray-50">{children}</div>
+    <div className="flex w-full flex-col bg-white lg:w-[500px] ">
+      {children}
+    </div>
   </div>
 );
 
diff --git a/src/components/ChatActionBar.tsx b/src/components/ChatActionBar.tsx
index 627128e..3247782 100644
--- a/src/components/ChatActionBar.tsx
+++ b/src/components/ChatActionBar.tsx
@@ -1,7 +1,6 @@
 import { ChangeEvent, KeyboardEvent } from "react";
 import ToggleChatTipsButton from "@/components/button/ToggleChatTipsButton";
 import MessageInput from "@/components/input/MessageInput";
-import TipsMenuContainer from "@/components/tips/TipsMenuContainer";
 
 interface ChatActionProps {
   isOpen: boolean;
@@ -21,7 +20,7 @@ const ChatActionBar = ({
   onSend
 }: ChatActionProps) => {
   return (
-    <div className="flex h-[68px] w-full items-center justify-center border-t border-gray-100 bg-white">
+    <section className="flex h-[68px] w-full items-center justify-center border-t border-gray-100 bg-white">
       <ToggleChatTipsButton isOpen={isOpen} setIsOpen={setIsOpen} />
       <MessageInput value={value} onChange={onChange} onKeyUp={onKeyUp} />
       <img
@@ -32,7 +31,7 @@ const ChatActionBar = ({
         width={40}
         height={40}
       />
-    </div>
+    </section>
   );
 };
 
diff --git a/src/components/button/ChatStartButton.tsx b/src/components/button/ChatStartButton.tsx
index a907dd6..283d97c 100644
--- a/src/components/button/ChatStartButton.tsx
+++ b/src/components/button/ChatStartButton.tsx
@@ -39,7 +39,7 @@ const ChatStartButton = ({ mode, mbti }: ChatStartButtonProps) => {
   };
   return (
     <button
-      className="flex h-[56px] w-[320px] items-center justify-center rounded-lg bg-primary-normal font-bold text-white md:w-[335px] lg:w-[460px]"
+      className="flex h-[56px] w-full items-center justify-center rounded-lg bg-primary-normal font-bold text-white lg:w-[460px]"
       onClick={handleNavigate}
     >
       대화 시작하기
diff --git a/src/components/button/LoginButton.tsx b/src/components/button/LoginButton.tsx
index 2118365..54922f6 100644
--- a/src/components/button/LoginButton.tsx
+++ b/src/components/button/LoginButton.tsx
@@ -7,7 +7,7 @@ const LoginButton = () => {
 
   return (
     <a href="/login" onClick={handleClick}>
-      <button className="h-[36px] w-[69px] rounded-lg border-[0.8px] border-gray-300 text-md font-bold text-gray-600">
+      <button className="mr-5 h-[36px] w-[69px] rounded-lg border-[0.8px] border-gray-300 text-md font-bold text-gray-600">
         로그인
       </button>
     </a>
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 4f7239c..a0e342a 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -1,4 +1,3 @@
-import { ReactNode } from "react";
 import { useLocation } from "react-router-dom";
 import SubHeader from "@/components/header/SubHeader";
 import MainHeader from "@/components/header/MainHeader";
@@ -8,14 +7,12 @@ type HeaderProps = {
   title?: string;
   showPreviousIcon?: boolean;
   showShareIcon?: boolean;
-  children?: ReactNode;
 };
 
 const Header = ({
   title = "",
   showPreviousIcon = true,
-  showShareIcon = true,
-  children
+  showShareIcon = true
 }: HeaderProps) => {
   const { pathname } = useLocation();
   const { isLoggedIn } = useAuthStore();
@@ -23,7 +20,7 @@ const Header = ({
 
   return (
     <>
-      <div className="fixed z-50 w-full bg-white lg:w-[500px]">
+      <header className="fixed top-0 z-50 w-full bg-white lg:w-[500px]">
         {isHomepage ? (
           <MainHeader isLoggedIn={isLoggedIn} />
         ) : (
@@ -33,9 +30,7 @@ const Header = ({
             showShareIcon={showShareIcon}
           />
         )}
-      </div>
-
-      <div className="pt-14">{children}</div>
+      </header>
     </>
   );
 };
diff --git a/src/components/header/MainHeader.tsx b/src/components/header/MainHeader.tsx
index b5fa4e2..18b19a9 100644
--- a/src/components/header/MainHeader.tsx
+++ b/src/components/header/MainHeader.tsx
@@ -11,7 +11,7 @@ const MainHeader = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
   };
 
   return (
-    <header className="flex h-[56px] w-full items-center justify-between bg-white pl-5">
+    <div className="flex h-[56px] w-full items-center justify-between bg-white pl-5">
       <Link to="/" className="flex items-center">
         <img
           src="/public/icon/mbtipslogo.svg"
@@ -32,7 +32,7 @@ const MainHeader = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
           onClick={handleNavigate}
         />
       )}
-    </header>
+    </div>
   );
 };
 
diff --git a/src/components/header/SubHeader.tsx b/src/components/header/SubHeader.tsx
index 325bc49..466fa95 100644
--- a/src/components/header/SubHeader.tsx
+++ b/src/components/header/SubHeader.tsx
@@ -56,7 +56,7 @@ const SubHeader = ({
 
   return (
     <>
-      <header className="relative flex h-[56px] w-full items-center justify-between border-b border-gray-100 bg-white">
+      <div className="relative flex h-[56px] w-full items-center justify-between border-b border-gray-100 bg-white">
         {showPreviousIcon && (
           <img
             src="/public/icon/arrow_left.svg"
@@ -85,7 +85,7 @@ const SubHeader = ({
             />
           </button>
         )}
-      </header>
+      </div>
 
       {isLeaveChatModalOpen && (
         <ActionConfirmModal
diff --git a/src/components/tips/TipsMenuContainer.tsx b/src/components/tips/TipsMenuContainer.tsx
index 3f5eebb..ec5c5cb 100644
--- a/src/components/tips/TipsMenuContainer.tsx
+++ b/src/components/tips/TipsMenuContainer.tsx
@@ -8,11 +8,11 @@ const TipsMenuContainer = ({
   mbti: string;
 }) => {
   return (
-    <>
+    <section>
       <TipsMenu mode="topic" mbti={mbti} />
       <TipsMenu mode="conversation" mbti={mbti} />
       <TipsMenu mode="temperature" conversationId={conversationId} />
-    </>
+    </section>
   );
 };
 
diff --git a/src/index.css b/src/index.css
index bb41aa8..8b5d98b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -29,9 +29,10 @@ body {
 }
 
 main {
+  margin-top: 54px;
   background-color: white;
   font-size: 14px;
-  width: 100vh;
+  width: 100vw;
   max-width: 500px;
 
   @media screen and (min-width: 500px) {
diff --git a/src/pages/Chat.tsx b/src/pages/Chat.tsx
index bae0e00..1f4b026 100644
--- a/src/pages/Chat.tsx
+++ b/src/pages/Chat.tsx
@@ -143,10 +143,9 @@ const Chat = () => {
         <meta property="twitter:description" content={`${mbti}와의 대화창`} />
       </Helmet>
 
-      <div className="flex h-screen w-full flex-col bg-white lg:w-[500px]">
-        <Header title={chatTitle} showShareIcon={false} />
-
-        <div className="flex-1 space-y-4 overflow-y-auto px-[20px] pt-6">
+      <Header title={chatTitle} showShareIcon={false} />
+      <main>
+        <section className="h-[calc(100vh-124px)] flex-1 space-y-4 overflow-y-auto px-[20px] pt-6">
           <IntroGuide />
           {/* 메시지 리스트 */}
           {messages.map((msg, idx) => (
@@ -173,7 +172,7 @@ const Chat = () => {
           ))}
 
           <div ref={bottomRef} />
-        </div>
+        </section>
 
         <ChatActionBar
           isOpen={isOpen}
@@ -185,7 +184,7 @@ const Chat = () => {
         />
 
         {isOpen && <TipsMenuContainer conversationId={id} mbti={mbti} />}
-      </div>
+      </main>
     </>
   );
 };
diff --git a/src/pages/ChatRecommend.tsx b/src/pages/ChatRecommend.tsx
index 523a0b4..71447b0 100644
--- a/src/pages/ChatRecommend.tsx
+++ b/src/pages/ChatRecommend.tsx
@@ -26,22 +26,20 @@ const ChatRecommend = () => {
         <meta property="twitter:description" content="대화 주제 추천" />
       </Helmet>
 
-      <div>
-        <Header
-          title="대화 주제 추천"
-          showPreviousIcon={true}
-          showShareIcon={true}
+      <Header
+        title="대화 주제 추천"
+        showPreviousIcon={true}
+        showShareIcon={true}
+      />
+      <main className="mx-auto flex h-screen flex-col px-5 py-6">
+        <img
+          src={mbtiImage}
+          alt="mbti 이미지"
+          className="h-auto w-full rounded-2xl"
         />
-        <main className="mx-auto flex h-screen flex-col px-5 py-6">
-          <img
-            src={mbtiImage}
-            alt="mbti 이미지"
-            className="h-auto w-full rounded-2xl"
-          />
-          <h1 className="mt-9 text-xl font-bold">{title}</h1>
-          <span className="mt-6 whitespace-pre-wrap">{description}</span>
-        </main>
-      </div>
+        <h1 className="mt-9 text-xl font-bold">{title}</h1>
+        <span className="mt-6 whitespace-pre-wrap">{description}</span>
+      </main>
     </>
   );
 };
diff --git a/src/pages/ChatTemperature.tsx b/src/pages/ChatTemperature.tsx
index 14aa2d3..0aa79d1 100644
--- a/src/pages/ChatTemperature.tsx
+++ b/src/pages/ChatTemperature.tsx
@@ -39,32 +39,26 @@ const ChatTemperature = () => {
         <meta property="twitter:description" content="대화의 온도" />
       </Helmet>
 
-      <div>
-        <Header
-          title="대화 온도"
-          showPreviousIcon={true}
-          showShareIcon={true}
+      <Header title="대화 온도" showPreviousIcon={true} showShareIcon={true} />
+      <main className="mx-auto flex h-screen flex-col px-5 py-6">
+        <img
+          src={"/image/image_온도.png"}
+          alt="mbti 온도 이미지"
+          className="h-auto w-full rounded-2xl"
         />
-        <main className="mx-auto flex h-screen flex-col px-5 py-6">
-          <img
-            src={"/image/image_온도.png"}
-            alt="mbti 온도 이미지"
-            className="h-auto w-full rounded-2xl"
-          />
-          <h1 className="mt-9 text-xl font-bold">
-            방금까지 나눈 대화로 온도를 측정했어요!
-          </h1>
-          {temperature ? (
-            <span className="mt-6 whitespace-pre-wrap">
-              현재까지 나눈 대화의 온도는 {temperature}도에요
-            </span>
-          ) : (
-            <span className="mt-6 whitespace-pre-wrap">
-              ...대화의 온도를 불러오는 중
-            </span>
-          )}
-        </main>
-      </div>
+        <h1 className="mt-9 text-xl font-bold">
+          방금까지 나눈 대화로 온도를 측정했어요!
+        </h1>
+        {temperature ? (
+          <span className="mt-6 whitespace-pre-wrap">
+            현재까지 나눈 대화의 온도는 {temperature}도에요
+          </span>
+        ) : (
+          <span className="mt-6 whitespace-pre-wrap">
+            ...대화의 온도를 불러오는 중
+          </span>
+        )}
+      </main>
     </>
   );
 };
diff --git a/src/pages/ChatTips.tsx b/src/pages/ChatTips.tsx
index b18352a..5a87e14 100644
--- a/src/pages/ChatTips.tsx
+++ b/src/pages/ChatTips.tsx
@@ -26,22 +26,16 @@ const ChatTips = () => {
         <meta property="twitter:description" content="대화 꿀팁" />
       </Helmet>
 
-      <div>
-        <Header
-          title="대화 꿀팁"
-          showPreviousIcon={true}
-          showShareIcon={true}
+      <Header title="대화 꿀팁" showPreviousIcon={true} showShareIcon={true} />
+      <main className="mx-auto flex h-screen flex-col px-5 py-6">
+        <img
+          src={mbtiImage}
+          alt="mbti 이미지"
+          className="h-auto w-full rounded-2xl"
         />
-        <main className="mx-auto flex h-screen flex-col px-5 py-6">
-          <img
-            src={mbtiImage}
-            alt="mbti 이미지"
-            className="h-auto w-full rounded-2xl"
-          />
-          <h1 className="mt-9 text-xl font-bold">{title}</h1>
-          <span className="mt-6 whitespace-pre-wrap">{description}</span>
-        </main>
-      </div>
+        <h1 className="mt-9 text-xl font-bold">{title}</h1>
+        <span className="mt-6 whitespace-pre-wrap">{description}</span>
+      </main>
     </>
   );
 };
diff --git a/src/pages/Content.tsx b/src/pages/Content.tsx
index 515cf2a..9c4d770 100644
--- a/src/pages/Content.tsx
+++ b/src/pages/Content.tsx
@@ -71,7 +71,7 @@ const Content = () => {
       <div className="flex w-full flex-col bg-white lg:w-[500px]">
         <Header title="콘텐츠" />
 
-        <div className="flex flex-col gap-[36px] px-5 py-5">
+        <main className="flex flex-col gap-[36px] px-5 py-5">
           {/* 상단 배너 */}
           <div className="relative overflow-hidden rounded-[16px] bg-gray-100">
             <picture>
@@ -104,7 +104,7 @@ const Content = () => {
           >
             대화 시작하기
           </button>
-        </div>
+        </main>
       </div>
     </>
   );
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 2b68975..069ff10 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -47,7 +47,7 @@ const Home = () => {
           <section aria-label="콘텐츠 배너">
             <Banner />
           </section>
-          <section className="mt-5 w-full" aria-label="빠른 대화">
+          <section className="mt-5" aria-label="빠른 대화">
             <div className="w-full px-[20px] py-[13px]">
               <SubTitle mode="빠른대화" />
             </div>
@@ -56,7 +56,7 @@ const Home = () => {
             </div>
           </section>
           <section aria-label="친구 목록">
-            <div className="w-full px-[20px] py-[21px]">
+            <div className="px-[20px] py-[21px]">
               <SubTitle mode="친구목록" />
             </div>
             <div className="flex justify-center pb-[127px]">
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 96a28cc..0a0b3fd 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -34,7 +34,7 @@ const Login = () => {
         <meta property="twitter:description" content="로그인/회원가입" />
       </Helmet>
 
-      <main className="flex h-[812px] flex-col items-center bg-white">
+      <main className="!mt-0 flex h-[812px] flex-col items-center bg-white">
         <img
           src={isPC ? "/image/login/banner_lg.png" : "/image/login/banner.png"}
           alt="로그인 페이지 이미지"
diff --git a/src/pages/MbtiTestQuestions.tsx b/src/pages/MbtiTestQuestions.tsx
index 444f268..8a2f13d 100644
--- a/src/pages/MbtiTestQuestions.tsx
+++ b/src/pages/MbtiTestQuestions.tsx
@@ -45,25 +45,23 @@ const MbtiTestQuestions = () => {
           />
         </Helmet>
 
-        <div className="flex w-full flex-col lg:w-[500px]">
-          <Header title="상대방 MBTI 유추 테스트" />
-          <main className="flex h-full flex-col items-center justify-center bg-white whitespace-pre-wrap ">
-            <span className="text-lg font-medium text-gray-500">
-              {content.number}/12
-            </span>
-            <h1 className="mt-[20px] text-center text-3xl font-medium whitespace-pre-wrap">
-              {content.question}
-            </h1>
-            <img
-              src={`/icon/mbti_test_${currentPage}.svg`}
-              alt="mbti 테스트 과정 이미지"
-              className="mt-10"
-            />
-            <div className="mt-[93px]">
-              <MbtiAnswerButtons content={content.answers} />
-            </div>
-          </main>
-        </div>
+        <Header title="상대방 MBTI 유추 테스트" />
+        <main className="flex h-full flex-col items-center justify-center bg-white whitespace-pre-wrap ">
+          <span className="text-lg font-medium text-gray-500">
+            {content.number}/12
+          </span>
+          <h1 className="mt-[20px] text-center text-3xl font-medium whitespace-pre-wrap">
+            {content.question}
+          </h1>
+          <img
+            src={`/icon/mbti_test_${currentPage}.svg`}
+            alt="mbti 테스트 과정 이미지"
+            className="mt-10"
+          />
+          <div className="mt-[60px]">
+            <MbtiAnswerButtons content={content.answers} />
+          </div>
+        </main>
       </>
     );
   } else return <Error statusCode="404" />;
diff --git a/src/pages/MyInfo.tsx b/src/pages/MyInfo.tsx
index 9805ba2..2bd05f9 100644
--- a/src/pages/MyInfo.tsx
+++ b/src/pages/MyInfo.tsx
@@ -75,39 +75,41 @@ const MyInfo = () => {
     <div className="relative flex flex-col bg-white lg:w-[500px]">
       <Header title="내 정보" showShareIcon={false} />
 
-      <ul className="mt-[10px] flex flex-col justify-between gap-[20px]">
-        {menuItems.map((item, index) => (
-          <li
-            key={index}
-            className="flex h-[56px] cursor-pointer items-center justify-between px-5 py-4 hover:bg-gray-50"
-            onClick={item.onClick}
-          >
-            <span className="text-base font-medium text-gray-900">
-              {item.label}
-            </span>
-            <img
-              src="/icon/arrow_right.svg"
-              alt="arrow"
-              className="h-6 w-6 text-gray-600"
-            />
-          </li>
-        ))}
-      </ul>
+      <main>
+        <ul className="mt-[10px] flex flex-col justify-between gap-[20px]">
+          {menuItems.map((item, index) => (
+            <li
+              key={index}
+              className="flex h-[56px] cursor-pointer items-center justify-between px-5 py-4 hover:bg-gray-50"
+              onClick={item.onClick}
+            >
+              <span className="text-base font-medium text-gray-900">
+                {item.label}
+              </span>
+              <img
+                src="/icon/arrow_right.svg"
+                alt="arrow"
+                className="h-6 w-6 text-gray-600"
+              />
+            </li>
+          ))}
+        </ul>
 
-      {modalType && (modalType === "logout" || modalType === "withdraw") && (
-        <ActionConfirmModal
-          title={alertConfig[modalType].title}
-          message={alertConfig[modalType].message}
-          cancelText={alertConfig[modalType].cancelText}
-          confirmText={alertConfig[modalType].confirmText}
-          onCancel={handleCancel}
-          onConfirm={handleConfirm}
-        />
-      )}
+        {modalType && (modalType === "logout" || modalType === "withdraw") && (
+          <ActionConfirmModal
+            title={alertConfig[modalType].title}
+            message={alertConfig[modalType].message}
+            cancelText={alertConfig[modalType].cancelText}
+            confirmText={alertConfig[modalType].confirmText}
+            onCancel={handleCancel}
+            onConfirm={handleConfirm}
+          />
+        )}
 
-      {modalType && (modalType === "terms" || modalType === "privacy") && (
-        <TermsAndPrivacyModal mode={modalType} closeModal={handleCancel} />
-      )}
+        {modalType && (modalType === "terms" || modalType === "privacy") && (
+          <TermsAndPrivacyModal mode={modalType} closeModal={handleCancel} />
+        )}
+      </main>
     </div>
   );
 };
diff --git a/src/pages/SelectInfo.tsx b/src/pages/SelectInfo.tsx
index 8b7ed35..a756669 100644
--- a/src/pages/SelectInfo.tsx
+++ b/src/pages/SelectInfo.tsx
@@ -250,9 +250,9 @@ const SelectInfo = () => {
         />
       </Helmet>
 
-      <div className="flex w-full flex-col bg-white lg:w-[500px]">
-        <Header title={headerTitle} showShareIcon={false} />
+      <Header title={headerTitle} showShareIcon={false} />
 
+      <main>
         <div className="mx-auto w-[320px]">
           {/* MBTI 선택 */}
           <div className="mb-[40px] pt-[48px]">
@@ -397,7 +397,7 @@ const SelectInfo = () => {
             {confirmButtonText}
           </button>
         </div>
-      </div>
+      </main>
     </>
   );
 };