Bootstrap row extends beyond encompassing columns - css

Question

I have been attempting to replicate Quora's design in Bootstrap when I encountered following problem. On every question page of Quora, say this one, there is a left sidebar. So for the first section (titled 'Want Answers'), I have a following structure:
<div class="col-lg-2">
<div id="left-sidebar">
<div id="want-answers">
<p><small>18 WANT ANSWERS</small></p>
<hr>
<div class="row">
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
</div>
<div class="row">
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
</div>
</div>
<!-- /#want-answers -->
Left sidebar is 2 columns wide. Now, as the image displays, each row (horizontal highlighting) extends want-answers div (vertical blue highlighting). Why is so? Shouldn't row encompass the full width of encompassing col-lg-2 div?

Answer 1

I'm not sure if this is a problem but try closing out your image tags like this: <img src="img/350x350.gif}" alt="" width="32px" height="32px"/>
in your code there is no trailing slash.
A large portion of achieving what you are looking for will have to do with overriding default padding and margins that bootstrap applies to rows and or columns. I was able to contain the images and center them with the following modifications:
DEMO
CSS:
#left-sidebar {
text-align:center;
background:#ccc;
}
.min-width {
min-width:153px;
}
#want-answers {
background:#f1f1f1;
min-width:153px;
width:100%;
text-align:center;
}
.no-marg-pad {
padding:0;
margin:0;
}
.img-line {
background:#000;
width:100%;
min-width:153px;
}
.img-padding {
padding:0;
margin-bottom:10px;
}
HTML
<div id="left-sidebar" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 no-marg-pad min-width">
<div class="row no-marg-pad">
<div id="want-answers" class="col-xs-12">
<p><small>18 WANT ANSWERS</small></p>
</div>
</div>
<div class="row no-marg-pad">
<div class="img-line">
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
</div>
</div>
<div class="row no-marg-pad">
<div class="img-line">
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
</div>
One other thing you may want to look at is defining the column width for small and medium size screens as well e.g. col-sm-2 col-md-2

Answer 2

I'm not sure if you have any custom CSS for #want-answers or #left-sidebar, but one problem is that 4-32px images would usually extend beyond the width of the col-lg-2. Change them to img-responsive so they shrink as needed..
<div class="col-lg-3">
<img src="//placehold.it/350" alt="" width="32px" height="32px" class="img-responsive">
</div>
http://codeply.com/go/OtSvmYQfcX