Bootstrap fill entire column with colour - html

Question

I want to draw a backround colour that fills an entire Bootstrap column and row. Currently the coloured area (element with id of html_overlay below) exactly matches the specified text width, not column width. Any ideas?
html:
<div class="container">
<div class="row">
<div class="col-sm-2 col-lg-1">.col-sm-2
<a class="btn btn-primary pull-left" id="br_button" href="do_something">Button</a>
</div>
<div class="col-sm-10 col-lg-11">outer .col-sm-10
<div class="col-sm-12 col-md-11">inner .col-sm-10
<div id='html_overlay'>
<div id="heading_area">
<h3>This entire column should have the background colour</h3>
</div>
<div class="wrapper" id="my_title"></div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-3">
<div class="wrapper" id="l_space_area"></div>
</div>
<div class="col-xs-8 col-sm-8 col-md-7">
<div class="wrapper" id="text_area">
<h1 id="my_text"></h1>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-3">
<div class="wrapper" id="r_space_area"></div>
</div>
</div>
</div>
<!-- overlay -->
</div>
<div class="col-sm-0 col-md-1">inner .col-sm-2</div>
</div>
<!-- outer second column -->
</div>
</div>
<!-- container -->
css:
body {
font-family: sans-serif;
background-color: #B3E5FC;
font-size: 100%
}
#container {
position: relative
}
#html_overlay {
position: absolute;
top: 0;
z-index: 100;
background-color: rgba(246, 250, 251, 0.9);
border: 1px solid;
border-color: rgba(0, 0, 0, 0.5);
}
#text_area {
z-index: 10;
bottom: 0;
}

Answer 1

Add left:0 and right:0 in class #html_overlay