Floated elements have smaller width than the grid column - singularitygs

Question

I am trying to do a Singularity layout with a main container and a sidebar. In the main container I'd like to have a list of floated elements that will get line breaks at each 3.
Here's the relevant gist:
http://sassbin.beta.caliper.pl/gist/8704970/
Unfortunately width(1) + width(2) + width(3) != width(main). What am I doing wrong? I have to use the grid for items 1..N, because they need to align elements in the page's header (not included in the gist).

Answer 1

So after approaching the topic with a fresh mind I managed to get the expected positioning.
Here's a new gist for everyone to compare:
http://sassbin.beta.caliper.pl/gist/8900975/
There where a few things that needed changing:
Add body { margin: 0 } to align the #include background-grid() visualizations with the act.
Remove all borders and replace them with backgrounds to get rid of 1px differences.
Change grid inside item container with #include layout() to match the container's grid-span.
Style items with nth-child and #include float-span().
Specify last for the last item in a row to avoid unexpected line breaks.
The crucial part of the code is:
#main {
#include grid-span(9,1);
background: yellow;
#include layout(9) {
.item {
&:nth-child(3n+2) {
#include float-span(3,1);
background: blue;
}
&:nth-child(3n+0) {
#include float-span(3,1);
background: red;
}
&:nth-child(3n+1) {
#include float-span(3,last);
background: green;
}
}
}
}