heading not extending to the end of the div - html

Question

I have a heading banner that overlays across a background image for a tile. To make it responsive, I set the width to auto and it looks great on a collapsed screen (see capture below). Also, I'm using Bootstrap 4.
However, on full screen resolution, the heading background doesn't extend to the end of the div. I've tried to eliminate any padding, but I can't seem to get it to go to the end. See image.
Here's 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>
and 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));
}

Answer 1

First you are missing the container div before the row. then, to force the title to be full width you need to add negative margin in order to override the padding of the outer class col-sm-2.
Avoid changing styles of bootstrap classes as I saw in other answers, this can break some of your other layout.
/*--------------*/
/*---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;
margin-left:-15px;
margin-right:-15px;
padding-top: 25px;
color: #fff;
background: linear-gradient(rgba(93, 139, 229, 0.7), rgba(93, 139, 229, 0.7));
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--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="container">
<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>
</div>
</section>

Answer 2

This should do it:
.row, .col {
padding: 0;
margin: 0;
}
#cardio {
padding: 0;
}
#cardio h1 {
width: 100%;
}
Keep the rest as is