diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
index 08f93d2..7df102f 100644
--- a/src/components/layout/footer/Footer.tsx
+++ b/src/components/layout/footer/Footer.tsx
@@ -3,10 +3,13 @@ import AboutViNO from './AboutViNO';
 import SendEmail from './SendEmail';
 
 import FooterLogo from '@/assets/logo-footer.png';
+import { isSideBarOpenState } from '@/stores/ui';
+import { useRecoilValue } from 'recoil';
 
 const Footer = () => {
+  const isSideBarOpen = useRecoilValue(isSideBarOpenState);
   return (
-    <FooterStyle.Container>
+    <FooterStyle.Container width={`100% + ${isSideBarOpen ? '348px' : '0px'}`}>
       <img src={FooterLogo} alt="Footer 로고 이미지" />
       <SendEmail />
       <AboutViNO />
diff --git a/src/components/layout/header/index.tsx b/src/components/layout/header/index.tsx
index 47c625e..48fe526 100644
--- a/src/components/layout/header/index.tsx
+++ b/src/components/layout/header/index.tsx
@@ -52,7 +52,11 @@ const Header = () => {
   }, [observer, pathname]);
 
   return (
-    <HeaderStyle.Container id="header" color={isDark ? 'gray500' : 'white'}>
+    <HeaderStyle.Container
+      id="header"
+      color={isDark ? 'gray500' : 'white'}
+      width={`100% + ${isSideBarOpen ? '348px' : '0px'}`}
+    >
       <HeaderStyle.Area>
         <HeaderStyle.Button
           color={isDark ? 'white' : 'gray500'}
diff --git a/src/styles/layout/footer/index.ts b/src/styles/layout/footer/index.ts
index 52b87e6..026fa29 100644
--- a/src/styles/layout/footer/index.ts
+++ b/src/styles/layout/footer/index.ts
@@ -1,11 +1,12 @@
 import styled from 'styled-components';
 import theme from '../../theme';
 
-export const Container = styled.footer`
+export const Container = styled.footer<{ width: string }>`
   padding: 60px 145px;
   background-color: ${theme.color.gray100};
   ${theme.typography.Body1};
   position: relative;
+  width: ${(props) => `calc(${props.width})`};
   z-index: -1;
 `;
 
diff --git a/src/styles/layout/header/index.ts b/src/styles/layout/header/index.ts
index 3ee20c1..0496f9b 100644
--- a/src/styles/layout/header/index.ts
+++ b/src/styles/layout/header/index.ts
@@ -3,7 +3,7 @@ import { ColorKeyType } from '@/styles/theme';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-export const Container = styled.header<{ color: ColorKeyType }>`
+export const Container = styled.header<{ color: ColorKeyType; width: string }>`
   position: sticky;
   left: 0;
   top: 0;
@@ -11,7 +11,7 @@ export const Container = styled.header<{ color: ColorKeyType }>`
   padding: 16px 60px;
   display: flex;
   justify-content: space-between;
-  width: 100%;
+  width: ${(props) => `calc(${props.width})`};
   background-color: ${(props) => props.theme.color[props.color]};
   transition: background-color 0.2s;
 `;