Верхний и нижний колонтитулы не занимают всю ширину ⇐ CSS

[Anonymous]

Верхний и нижний колонтитулы отлично работают на экране ноутбука. Но когда я включаю адаптивный экран и тестирую его разную ширину, ширина верхнего и нижнего колонтитулов уменьшается. Я хочу, чтобы при уменьшении ширины экрана верхний и нижний колонтитулы по-прежнему занимали 100 % ширины экрана, как и должно быть.

Код: Выделить всё

body{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.header {
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
justify-content: space-evenly;
background-color: aqua;
margin-top: 0.5rem;
}

.left {
line-height: 0.8;
display: grid;
grid-column: 1;
justify-content: center;
margin-right: 4rem;
font-family: "Shadows Into Light", cursive;
font-style: normal;
cursor: none;
}

.left-title {
margin: 0;
text-align: center;
padding: 0;
font-size:2rem;
text-decoration: underline;
text-decoration-color: #3C4242;
font-weight: 600;
}

.middle {
display: flex;
flex-direction: row;
margin-right: 5rem;
}

.link {
margin-left: 5rem;
text-decoration: none;
color: #3C4242;
font-size: large;
}

.link:hover{
color: #0d0d0d;
}

.right {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 3rem;
}

.person {
cursor: pointer;
margin:0 1rem 0 1rem
}

.cart {
cursor: pointer;
}

.footer{
display: flex;
width: 100%;
flex-direction: column;
background-color: #3C4242;
color: #F6F6F6;
width: 100% !important;
}

.info {
margin-top: 1rem;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}

.info > div > p{
cursor: pointer;
}

.icons {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}

.social {
padding-top: 1.5rem;
align-content: center;
}

.icons > div > span {
height: 1.5rem;
width: 5rem;
}

.download >  h1 {
line-height: 0.5;
}

.copyright {
text-align: center;
margin-top: 2rem;
margin-bottom: 3rem;
}

Код: Выделить всё

Document





test Store

[url=/]Shop[/url]
[url=/]Men[/url]
[url=/]Women[/url]
[url=/]Combos[/url]

search
cart
person


test page



Need Help
Contact Us
Track Order
FAQ's
Career

Company
About Us
Euphoria Blog
Collaboration
Media

More Info
Terms and Conditions
Privacy Policy
Shipping Policy

Location
support@euphoria.com
Banani, Dhaka, Bangladesh




icon
icon
icon

Download The App
icon
icon


Copyright © 2024 Euphoria Ltd. All rights reserved

Я пробовал использовать медиа-запрос, но он не работает

Подробнее здесь: https://stackoverflow.com/questions/785 ... full-width