bootstrap empty space in ie9

Question

<section class="content">
 <div class="row">
  <aside class="hidden-xs hidden-sm col-md-1 col-lg-1 fixed-left-bar">
   <span class="about">about</span>
  </aside>
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 content-container">
   <div class="hidden-xs hidden-sm col-md-6 col-lg-6 background"></div>
  </div>
  <aside class="hidden-xs hidden-sm col-md-3 col-lg-3 fixed-right-bar">
  </aside>
 </div>
</section>

div.background should be stay next to aside.fixed-right-bar, but page make scroll bar. In chrome It works successfully. How can I remove that whitespace?

Answer 1

This is because of .row calss, it takes negative margin on left and right both sides.

.row {
    margin-right: -15px;
    margin-left: -15px;
}

Wrap your code in container or container-fluid classes.

<section class="content container-fluid">
 <div class="row">
  <aside class="hidden-xs hidden-sm col-md-1 col-lg-1 fixed-left-bar">
   <span class="about">about</span>
  </aside>
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 content-container">
   <div class="hidden-xs hidden-sm col-md-6 col-lg-6 background"></div>
  </div>
  <aside class="hidden-xs hidden-sm col-md-3 col-lg-3 fixed-right-bar">
  </aside>
 </div>
</section>