Верхний и нижний колонтитулы не занимают всю ширину ⇐ 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
[email protected]
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