Adding Padding to the sides keeps breaking layout

I thought I had Susy down, but have been struggling with this for a couple of hours now. I feel incredibly stupid, too, because I have never had this problem before, so I know it is on my end. Probably a misunderstanding of the box model, but here is what I am having trouble with.

I have my container div set up, and in it a #main div with 9 columns for content, and a 3 column sidebar. The #main div has a white background so I need some padding around it, but whenever I add the padding the layout breaks and the sidebar gets pushed down to the bottom.

no padding:

with padding:

my html structure is:
.container
+ main
++ content ( @include span(9) )
++ sidebar ( @include span(last 3) )

I also have border box-sizing set globally both in the html and the susy setting. If I add width: 100% and box-sizing: content-box to the #main div, this works, but makes the container wider on the right side pushing it past the elements above and below it, which I understand since content-box adds to it. This works in a sense, but not my desired result. I need the #main div to stay the same width but allow me to add padding to the left and right.

Like I said, this is a new issue for me. I have built several sites with Susy and haven't had this problem before, so I feel incredibly stupid.

Update 1: Adding padding to the Content and Sidebar div works, except that on one of my pages I have an image gallery in the Content div which does the same thing, third item in the row falls down to the bottom.

Update 2: After spending all day thinking and working on this, I've come to the conclusion that this has to do with it being a Fixed site with fixed column widths. The layout doesn't break when the widths of the divs are set in %'s even with a fixed width container. Interesting. Maybe there is a way to get Susy to work like that using the 'static' math output, I'm not sure.

Add it to your columns, like this:

#content {
  @include span(9 of 12);
  padding: 20px 0 20px 20px;
}

#sidebar {
  @include span(last 3 of 12);
  padding: 20px 20px 20px 0;
}

Here you have it working:

http://codepen.io/yivi/pen/BywygG

And here with fluid math: http://codepen.io/yivi/pen/jEGEjj