Home heading not extending to the end of the div

# heading not extending to the end of the div

user1916
1#
user1916 Published in March 21, 2018, 8:19 pm
 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 Workouts by Category

Cardio

Hi
Hi
Hi
Hi
Hi
 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)); } 
 You need to login account before you can post.
Processed in 0.30085 second(s) , Gzip On .