Below 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 issue here is that the header, nav, and footer elements' background colors are not covering the full width of the page when viewed in mobile view on Chrome. It only covers half of the screen. Here are the screenshots to illustrate the difference: Mobile View
This shows how it looks without desktop view.
And this is how it appears with desktop view: Desktop View
I am currently learning CSS and I am struggling to understand what went wrong. I attempted to use media queries but that did not resolve the issue. Can someone please guide me on what needs fixing here?