I'm experiencing an issue with the heading banner on my website. When viewed on a collapsed screen, it looks great with responsive design (see capture below) thanks to setting the width to auto and utilizing Bootstrap 4.
https://i.sstatic.net/bsKg0.jpg
However, on full-screen resolution, the heading background fails to extend to the end of the div despite my attempts to remove padding. See image for reference.https://i.sstatic.net/7xFZq.jpg
Here is the snippet of my HTML:
<!--browse by category section-->
<section id="category">
<div class="card-header text-center">
<h4 class="card-title">Browse Workouts by Category</h1>
</div>
<div class="row btn-warning">
<div class="col-sm-2 bg-primary" id="cardio">
<h1 class="text-center">Cardio</h1>
</div>
<div class="col-sm-2 bg-primary">
Hi
</div>
<div class="col-sm-2 bg-primary">
Hi
</div>
<div class="col-sm-2 bg-primary">
Hi
</div>
<div class="col-sm-2 bg-primary">
Hi
</div>
<div class="col-sm-2 bg-primary">
Hi
</div>
</div>
</section>
Additionally, here is the relevant portion of my CSS:
/*--------------*/
/*---CATEGORIES-----*/
/*--------------*/
#cardio {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../img/users/pexels-photo-460520.jpeg') no-repeat;
background-size: cover;
height: 300px;
}
#cardio h1 {
margin-top: 100px;
height: 100px;
width: auto;
padding-top: 25px;
color: #fff;
background: linear-gradient(rgba(93,139,229,0.7), rgba(93,139,229,0.7));
}