Bootstrap row cannot fit all twelve columns - html

Question

I am trying to understand how bootstrap lays out the divs and why my layout does not render as I expected it to.
I am attempting to use boostrap's grid system to layout out two divs of width 5 columns (w/ the pink background) with a div separating them of width 2 columns (the black line).
When the outermost div shrinks beyond a certain amount, the inner divs no longer all fit contiguously, as shown below. This is not due to the screen size suprassing one of the cuttoffs (i.e. going from medium to small).
Why does this happen? Isn't bootstrap supposed to make sure that the div's shrink proportionally to their column widths?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 text-center filtersectionheader">
Course Level
</div>
</div>
<div class="row">
<!--Left div-->
<div class="col-sm-5" id="randompink">
<div class="row">
<div class="checkbox center-inner">
<label>
<input type="checkbox"> <small id="levelcheckboxtext">Minimum</small>
</label>
</div>
</div>
<div class="row">
<div class="dropdown center-inner">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">2000
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
</div>
</div>
<!-- End of Left div-->
<!--Small Black Line-->
<div class="col-sm-2 top45" id="shorthline"></div>
<!--End of Small Black line-->
<!--Right div-->
<div class="col-sm-5" id="randompink">
<div class="row">
<div class="checkbox center-inner">
<label>
<input type="checkbox"><small id="levelcheckboxtext">Maximum</small>
</label>
</div>
</div>
<div class="row">
<div class="dropdown center-inner">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">2000
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
</div>
</div>
<!--End of Right Div-->
</div>
</div>