Susy math always makes elements too large

Question

I'm trying to use Susy but I can not create a desirable grid. I want a fixed gutter grid with the gutters coming after the element, not before. I couldn't get that to work. It seems that no matter what I do the elements are too large and the last column falls to the next line.

See this gist: http://sassmeister.com/gist/6ebf5ec14f697f8d137c

In this basic three column layout each 1/3 width column is over 35% wide. What am I missing?

Answer 1

I only see width: 28.57143%; in your sassmeister output. The problem is actually caused by your border on all the elements. That adds several extra pixels to the layout, forcing it to break. You can either remove the borders, or add box-sizing: border-box so that borders no longer add to the element width. Susy has a border-box-sizing mixin that will apply that globally, if you want.