Nested Columns are being miscalculated?

Question

I'm desperately trying to get a site mocked up with Susy. I fear I may just be missing something obvious but when I nest items in my Susy grid each column percentage width and margin seem to be slightly overshooting such that they add up beyond 100% and wrap to the next line. In the following example the #main_headernav is set to span 8 of 12 columns and each li within should fill 2 of 8 columns. Each li has a computed style as below which adds up to more than 100% and causes the last item to wrap

width: 22.58065%;
float: left;
margin-right: 3.22581%;

This is is the offending example:

<header id="main_header">
    <img id="main_banner" src="images/test_banner.png" alt="Test">
    <nav id="main_headernav">
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#shop">Shop</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    </nav>          
</header>

And SASS:

$total-columns  : 12;           
$column-width   : 60px;           
$gutter-width   : 20px;  
$grid-padding   : $gutter-width;

//Set border-box sizing - also alters SUSY grid math
//@include border-box-sizing;

// Main Container
#main_container {
    @include container;
}

#main_header {
    @include span-columns(12 omega);

    #main_banner {
        @include span-columns(12 omega,12);
    }

    #main_headernav {
        @include span-columns(8 omega,12);

        li {
            @include span-columns(2,8);
        }
    }
}   

Answer 1

Ok so I knew it would be my problem :)

Of course it is necessary to use the nth-omega mixin on every 4th li child to avoid the extraneous margin and prevent wrapping.

And it only took 2 hours of staring at the same screen :)