Bootstrap 3 grid not behaving as expected when resized

Question

The following code works fine at certain resolutions but when I squeeze the browser down, the col-xs-1 gets pushed to the next line. This code is very plain and simple, I'm not sure what is wrong here.

It seems the bootstrap width percentages are off by a tiny amount.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">
        3
        </div>
        <div class="col-xs-8">
        8
        </div>
        <div class="col-xs-1">
        1
        </div>
    </div>
</div>

JSFiddle

Answer 1

The problem is padding.

Bootstrap assumes you are using its layout configuration; its Navbar and other elements have default padding so everything is aligned. I fixed your example somewhat; on your fiddle I couldn't see bootstrap.js nor jquery.js so I wrote up a jsbin:

https://jsbin.com/komevecaho/edit?html,output

Also, this SO question may help clear things up: Remove padding from columns in Bootstrap 3