Susy Responsive Grids, strange gutter sizes

Question

does anyone know why my gutters in Susy seem to be different widths?

I have a nested grid layout. Changing the gutters to larger values seems to even things out. Also, the text seems to be overflowing a bit. Here are my default values:

$column-width   : 12em;            // each column is 4em wide
$gutter-width   : 4em;             // 1em gutters between columns
$grid-padding   : $gutter-width;   // grid-padding equal to gutters
$total-columns  : 16; 

Answer 1

You'll see in the docs for susy-grid-background that it shouldn't be trusted as a pixel-exact representation of your grid. It's only there as a rough guide. Browsers are terrible at handling sub-pixel rounding in background gradients.