Adding Padding to the sides keeps breaking layout - susy-compass

Question

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.

Answer 1

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

Answer 2

I was able to fix it by increasing it by 1 more column.
http://codepen.io/anon/pen/RNZOQL
columns: 13
The issue was because of the padding you needed extra columns.