Experiencing an issue with the card layout in my weather dashboard app. The cards within a container are not spreading out evenly to match the 100% width of the header. I want the container with the 5 cards to be the same width as the header and wrap properly on mobile devices. Any assistance would be greatly appreciated. Below is the HTML and CSS code:
This is the HTML code consisting of 5 cards inside the container div.
<body>
<header>
<h1> Weather Dashboard </h1>
<p id="currentDay"> </p>
<input type="text" class="searchBox" placeholder="City Search">
<!-- Hidden Recent Searches Bar with Bootstrap -->
<ul class="list-group list-group-horizontal-sm" hidden>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
<div class="btnContainer">
<button class= "goBtn"> Go</button>
</div>
</header>
<!-- Cards for weather forecast with Bootstrap -->
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"></h5>
<h6 class="card-subtitle mb-2 text-muted"></h6>
<p class="card-text"></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"></h5>
<h6 class="card-subtitle mb-2 text-muted"></h6>
<p class="card-text"></p>
</div>
</div>
header {
background: rgb(255,255,255, 0.35);
border-radius: 1rem;
margin-bottom: 10px;
padding: 10px;
width: 90%;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.container {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
}
.card {
background: rgb(255,255,255, 0.75);
font-family: all-round-gothic, sans-serif;
font-weight: 400;
font-style: normal;
border-radius: 1rem;
margin: 25px;
}
Appreciate any help!