Unsemantic grid. Why is this last div being shifted beneath the others?

Unsemantic grid. Why is this last div being shifted beneath the others?

I'm using the unsemantic fluid grid, and want to have a row of divs, all
one line, that all add up to 100% of the page.
<div class="grid-container">
<div class="grid-parent yy name-strip zz">
<div class="yellow-pink-border mobile-grid-20 xx"></div>
<div class="green-blue-border mobile-grid-40 xx "></div>
<div class="red-yellow-border mobile-grid-15 xx"></div>
<div class="yellow-pink-border mobile-grid-20 xx"></div>
<div class="green-blue-border mobile-grid-5 xx"></div>
</div>
</div>
Grid parent = 100% and 20% + 40% + 15% + 20% + 5% = 100%, so why does the
last div (green-blue-border mobile-grid-5) shift down onto the next line
when the browser window gets small? When jsfiddle's result window
approaches around 200px:
http://jsfiddle.net/WNRbS/9/
The thing is, it works in the same breakpoint, so I really don't know what
is going on.