Using '@include media' on row of columns messes up the shift in bourbon neat

Question

Have been coming up with this rather irritating error - when my code is

benefits {
@include outer-container;

.benefit_text {
    @include span-columns(4);
    @include shift(2);
}

.benefit_list {
    @include omega();
    @include span-columns(4);

}

.testing {
    @include shift(2);
    @include span-columns(8);
    @include omega();
}


}

The alignment is as it should be, however, if I try to add media breakpoints, e.g

benefits {
@include outer-container;

.benefit_text {
    @include span-columns(4);
    @include shift(2);
    @include media($tablet) {
        @include span-columns(9);
        @include shift(0);
    }
}

.benefit_list {
    @include omega();
    @include span-columns(4);
    @include media($tablet) {
        @include span-columns(9);
    }
}

.testing {
    @include shift(2);
    @include span-columns(8);
    @include omega();
}

}

The alignment of the last div goes off for some reason (about one and a half columns too much) This happens on the larger screens even though it does seem to drop the columns without any trouble once i hit my $tablet breakpoint (which is 768px, 9)

Frustrating because the example http://neat.bourbon.io/examples/ does not address how its columns are dropping to full width on resize (especially the example with multiple rows) I've even tried to wrap the two columns in a row wrapper and apply the shift to the wrapper but this seems to squeeze the two collumns together instead, would be thankful for any help!