Bootstrap fill entire column with colour

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