Cannot get Susy grid to work properly

I'm going crazy! no idea what I'm doing wrong, it just won't work.. this is my code:

@import "susy";

$susy: (
  flow: rtl,
  columns: 24,
  gutters: .25,
);


.wrapper{
    @include container(70em);
}

header{
    background-color:red;
    height:200px;
}

nav{
    @include span(24);
    ul{
        li{
            background-color:orange;
            @include span(3);
        }
    }
}

.block{
    @include span(12 of 24);
    background-color:blue;
}

.ad{
    @include span(12 of 24);
    height:300px;
    background-color:green;
}

As far as I can tell it's calculating wrong, is this some kind of bug? here is a picture of how it's rendering for me currently.

why is this happening? (I've tried using a css reset, didn't fix it)

It would be much easier to help if you gave an indication of what you are hoping to achieve. But I'm guessing the problem is just the last element on each row dropping to the next row. That's because (as with many grid systems) the default setup uses margins for gutters, and you need to remove the final gutter for everything to fit properly. You can do that with the last keyword.

.ad{
    @include span(last 12);
}

For your navigation, since you have a number of siblings all the same size, you maybe want to use the gallery mixin as a shortcut to handle that for you:

li{
    @include gallery(3);
}

The other solution would be to use split or inside gutters, which don't require any removal:

$susy: (
  flow: rtl,
  columns: 24,
  gutters: .25,
  gutter-position: split,
);