Adding padding to the inside of a container - susy-compass

Question

I have designed a layout using 978px as the grid width, with 12px of grid padding. I've never really understood the purpose of grid padding, to be honest, and now I am even more confused, because I thought the grid padding would apply to the inside of my total width so things don't rest right at the edge of the grid.
For example, my header has a background color of #333. I span the logo section 3 columns, but it doesn't look good because it's right at the edge. If I add 12px of padding to the inside of the header, it messes up my column flow, obviously. I tried adding it to the span-columns mixin, like #include span-columns(3, 12, 12px 0px), but the padding is too wide, and I don't think this would be efficient because I would want it on everything that is on the left and right.
So what is the best way to get padding on the inside of the grid?
Here is a little structure:
page-wrapper (container)
#page
header#header
main
footer#footer
I tried adding padding to the #page-wrapper and #page divs, but this didn't work.
/***** UPDATE *****/
Here is a screen shot of what I am trying to achieve:
This is the desktop layout, that I want responsive, so the padding effect I would like to be the same throughout layouts. Basically, the grid in the screen shot is a total width of 1002, with 12px on the side, 12- 54px columns, and 11- 30px gutters.
this is a fireworks template, so my 320 page is 8 columns, 27px wide, with 12px gutters, and 10px gutter width. I am starting to think I am designing wrong, as I mentioned before, I don't really understand the point of grid padding.
As you can see, I would like there to be padding on the sides of the container which by default everything rests on the edges.
Here is a code snippet of my set up:
$total-columns : 8;
$column-width : 27px;
$gutter-width : 12px;
$grid-padding : 10px;
$container-style: fluid;
$full: 747px 12;
$tablet: 747px 12 977px;
$desktop: 978px 12;
#page-wrapper{
#include container;
#include susy-grid-background;
#include at-breakpoint(747px 12 977px){
#include set-container-width;
max-width: 747px;
#include susy-grid-background;
}
#include at-breakpoint(978px 12){
#include set-container-width;
max-width: 1002px;
#include susy-grid-background;
}
Now here is something I did by checking on that other post, and it seems to work, but I am not sure if it is the right way to do it:
#header{
margin-left: -$grid-padding;
margin-right: -$grid-padding;
padding: 0 $grid-padding;
margin-bottom: 1em;
}

Answer 1

Your screenshot link is broken, but if I understand right you simply want your outer grid elements to span the grid padding. For that, I use the technique you mentioned, although doing it by hand can be a pain if you want it too many places on the site. Here's a mixin that I've created to handle this kind of "bleed" in a flexible way:
#mixin bleed($padding: $grid-padding, $sides: left right) {
#if $sides == 'all' {
margin: - $padding;
padding: $padding;
} #else {
#each $side in $sides {
margin-#{$side}: - $padding;
padding-#{$side}: $padding;
}
}
}
The default setting there is to add $grid-padding bleed to the left and right. You can change the size of the bleed, and also the sides that it should apply to. You can apply it like this:
#header { #include bleed; }
#nav { #include bleed($sides: left); }
#main { #include bleed($sides: right); }
You have a few other strange bits of code. By default, Susy build what I call a magic grid: fluid with a max width. Instead of allowing that to happen by default, you are forcing your grids fully-fluid ($container-style: fluid;), including set-container-width (which would set the max-width if you hadn't turned it off, but is now doing nothing useful for you) and then adding a max-width by hand.
You also mention wanting different column and gutter widths at your different sizes. For that you will want to use with-grid-settings inside your breakpoints. e.g:
#include at-breakpoint($desktop){
#include with-grid-settings(12,54px,30px,12px) {
#include set-container-width;
#include susy-grid-background;
}
}