I keep getting unwanted extra space on the right side of the webpage whenever I'm adding bootstrap cards that looks like this: image problem, I'm trying to put everything inside of the sections ,does anyone know how to remove those space? thank you!
<section id="section" class="container-fluid" style="background-color: steelblue;">
<h1 id="bulletin">Bulletin Board</h1><br>
<hr id="bulletin-divider">
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100" id="cards">
<img src="..." class="card-img-top" alt="art preview">
<div class="card-body">
<h5 class="card-title">dasddsa</h5>
<hr>
<p class="card-text">ART DETAILS</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="art preview">
<div class="card-body">
<h5 class="card-title">dasddsa</h5>
<hr>
<p class="card-text">ART DETAILS</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
