When viewing multiple rows of containers on my page, the elements shift inline on smaller screens. I am looking to have the orange bar positioned behind and slightly below the header, spanning the width of the page. To achieve this, I utilized relative positioning and a negative z-index on the orange bar to push it under the title.
The query remains: How can I ensure that the backbar's width matches the screen while remaining within the container holding the title?
.backbar_orange {
background-color: rgb(250, 105, 0);
height: 80px;
width: 100%;
position: relative;
top: 130px;
z-index: -1;
}<div class="container">
<div class="row">
<div class="col-md-6">
<div class="backbar_orange"></div>
<h2>Sticker</h2>
<p>Content here</p>
</div>
<div class="col-md-6">
<img src="img/stckr.jpg">
</div>
</div>
</div>I hope this explanation clarifies my design. Any suggestions or insight on achieving this with CSS rather than jQuery would be greatly appreciated as I lack experience in using jQuery.