diff --git a/src/Router.tsx b/src/Router.tsx
index 573c0b60..7798048d 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -24,9 +24,10 @@ const Router = () => {
 }
 
 const Container = styled.main`
+  margin: 0 auto;
+  max-width: 1200px;
   position: relative;
   top:60px;
-  padding: 10px;
 `
 
 export default Router
\ No newline at end of file
diff --git a/src/components/Header.css b/src/components/Header.css
index fe21b3f3..46aa3f56 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -1,4 +1,4 @@
-.header__link_wrapper{
+.header__link-wrapper{
   display:flex;
   justify-content: flex-end;
   margin-right: 3rem;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 73d9fc94..ebfe8092 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -14,16 +14,18 @@ const Header = () => {
 
   return (
     <Container>
-      <ul className="header__link_wrapper">
-        {
-          pageLink.map((link,idx)=>
-            <li key={pageName[idx]} >
-              <Link to={`/${link}`}> {pageName[idx]} </Link>
-            </li>  
-          )
-        }
+      <InnerContainer>
+        <ul className="header__link-wrapper">
+          {
+            pageLink.map((link,idx)=>
+              <li key={pageName[idx]} >
+                <Link to={`/${link}`}> {pageName[idx]} </Link>
+              </li>  
+            )
+          }
         <li>{(user?.displayName) ? <>{user.displayName}님 <button onClick={handlerLogout}>로그아웃</button></> : <Link to={`/login`}> 로그인 </Link>} </li>
-      </ul>
+        </ul>
+      </InnerContainer>
     </Container>
   )
 }
@@ -31,6 +33,11 @@ const Header = () => {
 const handlerLogout = () => {
   signOut(auth);
 }
+const InnerContainer = styled.div`
+  margin: 0 auto;
+  max-width: 1200px;
+
+`
 
 const Container = styled.nav`
   position: fixed;
@@ -39,9 +46,10 @@ const Container = styled.nav`
   right: 0;
   width: 100%;
   height: 60px;
-  background-color: #999;
+  border-bottom: 2px solid #ddd;
   font-size: 1rem;
   z-index: 10;
+  background-color: #fff;
 `
 
 export default Header
\ No newline at end of file
diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css
index 913e05ee..88529d13 100644
--- a/src/components/Sidebar.css
+++ b/src/components/Sidebar.css
@@ -1,4 +1,4 @@
-.sidebar__link_wrapper{
+.sidebar__link-wrapper{
   display:flex;
   flex-flow: column;
   gap: 20px;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index f5a6b482..828f3304 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -46,13 +46,13 @@ const Sidebar = () => {
 
 const Container = styled.aside`
   position: fixed;
-  left: 0;
-  top: 60px;
-  bottom: 0;
   z-index: 9;
-  width: 140px;
-  height: 100%;
-  background-color: #ddd;
-`;
+  width: 180px;
+  height: 100vh;
+  border-right: 2px solid #ddd;
+  box-sizing: border-box;
+  padding: 5px;
+
+`
 
 export default Sidebar;
diff --git a/src/pages/Gallery.tsx b/src/pages/Gallery.tsx
index 7c822c36..35a67d67 100644
--- a/src/pages/Gallery.tsx
+++ b/src/pages/Gallery.tsx
@@ -53,9 +53,11 @@ Vivamus sed aliquet lacus. Aenean pharetra quis mi vel tempor. Duis id velit ali
 
 const Container = styled.section`
   position: relative;
-  left: 140px;
+  left: 180px;
   height: calc(100% - 60px);
-  width: calc(100% - 140px);
+  width: calc(100% - 180px);
+  padding: 5px;
+  box-sizing: border-box;
 `
 
 export default Gallery
\ No newline at end of file
diff --git a/src/pages/Wiki.tsx b/src/pages/Wiki.tsx
index 2495f57b..26866e94 100644
--- a/src/pages/Wiki.tsx
+++ b/src/pages/Wiki.tsx
@@ -33,9 +33,11 @@ const Wiki = () => {
 
 const Container = styled.section`
   position: relative;
-  left: 140px;
+  left: 180px;
   height: calc(100% - 60px);
-  width: calc(100% - 140px);
-`;
+  width: calc(100% - 180px);
+  padding: 5px;
+  box-sizing: border-box;
+`
 
 export default Wiki;