This is the css code:
*{margin:0; padding:0; box-sizing:border-box;}img{ display:block; max-width:100%; height:auto;}html{ scroll-behavior:smooth;}body{ min-height:100vh; font-family:fantasy; font-size:1.125rem; display:flex; flex-direction:column; background-color:#BF4F51; background-image:linear-gradient(315deg, #BF4F51 0%, #00C6A7 74%);}header,footer{ background-color:#333; color:#fff; padding:1rem; position:sticky; text-align:center;}header{ top:0; font-size:3rem;}footer{ bottom:0; font-size:1.5rem;}nav{ background-color:papayawhip; padding:1rem; display:flex; justify-content:space-evenly; text-align:center; font-size:1.5rem; margin-bottom:1rem; margin-top:1rem;}nav a,nav a:visited{ color:black; text-decoration:none;}nav a:hover, nav a:focus{ color:brown;}main{ flex-grow:1; display:flex; flex-direction:column; gap:2rem; padding:0.5rem; justify-content:center; align-items:center;}.card{ scroll-margin-top:8rem; width:min(100%, 400px); background-color:beige; border:2px solid black; border-radius:20px; padding:3rem; display:flex; flex-direction:column; text-align:center;}.card img{ border:2px solid black; border-radius:1000px;}.card figcaption{ margin:1rem; font-weight:bolder;<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Laylatul Qadr</title><link href="style.css" rel="stylesheet"></head><body><header><h1>Laylatul Qadr</h1></header><nav><a href="#Qirat">Qirat</a><a href="#Qiyam">Qiyam</a><a href="#Siyam">Siyam</a></nav><main><article id="Qirat" class="card"><figure><img src="feea4181f154cb619ce78d6f10b310f0.jpg" height="1308" width="736" alt="Qirat"><figcaption>Qirat</figcaption><p><q>Reflect on the ayahs.</q></p></figure></article><article id="Qiyam" class="card"><figure><img src="1c6c718d1b3a84f33af850da377ed593.jpg" height="853" width="640" alt="Qiyam"><figcaption>Qiyam</figcaption><p><q>Engage more in Qiyam Al layl.</q></p></figure></article><article id="Siyam" class="card"><figure><img src="eb538cd47834af92764559818a1434cc.jpg" height="989" width="736" alt="Siyam"><figcaption>Siyam</figcaption><p><q>Fast with the intention of your sins being forgiven.</q></p></figure></article></main><footer><p>Make The Most Out Of This Last 10 days!</p></footer></body></html>The header, nav and footer elements, backgroun-color, isn't covering the 100%width of the page when not viewed in desktop view in chromeIt just covers half of the viewLet me showwithout desktop view
This is without desktop view.
And the one with desktop view is here:here with desktop view
I am new to learning CSS, I am not really understanding what went wrong here? I tried adding the media quarry but that didn't work..? Can someone kind soul please take the time and point out what's wrong here?