The header and footer works fine in laptop screen. But when I turn on responsive screen and test it in different width, the header and footer both decreases in width. What I want is that when I reduce the width of the screen the header and footer should still take 100% width of the screen like it is supposed to.
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;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="mystyle.css"><title>Document</title></head><body><header class="header"><div class='left'><p class='left-title'> test Store</p></div><div class='middle'><a class="link" href="/">Shop</a><a class="link" href="/">Men</a><a class="link" href="/">Women</a><a class="link" href="/">Combos</a></div><div class='right'><span>search</span><span class="cart">cart</span><span class="person">person</span></div></header><main>test page</main><footer class="footer"><div class='info'><div><h1>Need Help</h1><p>Contact Us</p><p>Track Order</p><p>FAQ's</p><p>Career</p></div><div><h1>Company</h1><p>About Us</p><p>Euphoria Blog</p><p>Collaboration</p><p>Media</p></div><div><h1>More Info</h1><p>Terms and Conditions</p><p>Privacy Policy</p><p>Shipping Policy</p></div><div><h1>Location</h1><h5>support@euphoria.com</h5><h5>Banani, Dhaka, Bangladesh</h5></div></div><div class='icons'><div className='social'><span>icon</span><span>icon</span><span>icon</span></div><div class='download'><h1>Download The App</h1><span>icon</span><span>icon</span></div></div><div class='copyright'><span>Copyright © 2024 Euphoria Ltd. All rights reserved</span></div></footer></body></html>I tried using media query but it is not working