Bootstrap grid stacked columns not filling up the whole width - html

Question

I'm having issues with the following markup. The columns from the last row do not fill up the whole width even though the container is fluid and the sum of their classes is 12.
<div class="container-fluid">
<div class="row" id="header">
<h1>Title</h1>
</div>
<div class="row" id="ndHeader">
<h2>Categories </h2>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3" id="sidebar">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-9">
<div class="clearfix hidden-sm-up"></div>
<div class="row tileRow">
<div class="col-xs-4 col-sm-3 tile">
<div class="tileContent"> asd </div>
</div>
<div class="col-xs-4 col-sm-3 tile">
asd asd asdasdasdaddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
<div class="col-xs-4 col-sm-3 tile">
asd asd asdasdasdaddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
</div>
</div>
</div>
</div>
You can see the live example : http://www.bootply.com/GsJbodLFwb#

Answer 1

The columns are using the correct width. In the last row you have two main divs, a col-sm-3 and a col-sm-9. The col-sm-9 is correctly using up 75% of the available space. The div that has the col-sm-3 attached to it has some css overwriting its width. You need to remove the following code to get that back to spanning the full 25% that it should be:
#sidebar {
background-color:green;
//width:15em; <-- remove this
height:100%;
}
Also, the three divs inside of your tile row only add up to 9 at the sm size. You'll want to change those to col-sm-4 or just remove them altogether as the col-xs-4 will do the same thing.

Answer 2

You are setting widths for these 2 cells
<div class="col-xs-6 col-sm-3" id="sidebar">...</div>
<div class="col-xs-6 col-sm-3">...</div>
First one has a width: 15em; and the second one is width: 75%; which is causing that row width to behave oddly. If you need a custom width table i suggest not using the bootstrap rows & cells and just make your own.
<div class="row">
<div class="col-xs-12 col-sm-12">
*my custom table or divs here*
</div>
</div>