title: Adding padding to the inside of a container
body: <p>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.</p>
  
  <p>For example, my header has a background color of <code>#333</code>. 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 <code>@include span-columns(3, 12, 12px 0px)</code>, 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. </p>
  
  <p>So what is the best way to get padding on the <em>inside</em> of the grid? </p>
  
  <p>Here is a little structure:</p>
  
  <pre><code>page-wrapper (container)
   #page
    header#header
    main
    footer#footer
  </code></pre>
  
  <p>I tried adding padding to the <code>#page-wrapper</code> and <code>#page</code> divs, but this didn't work. </p>
  
  <p>/<strong><em>*</em>**<em>*</em>*</strong> UPDATE <strong><em>*</em>**<em>*</em>*</strong>/</p>
  
  <p>Here is a screen shot of what I am trying to achieve:</p>
  
  <p><img src="https://photos-3.dropbox.com/thumb/AAA0N71EuqbFvbIucmgTyB0Ox4H96qC32PQpEzsHWtCdnQ/33001790/png/1024x768/2/1346547600/0/2/grid_example.png/3YV9GVlUSrO4hPZ-x6F5wV9cFULapfxJ15PBtBeRG58" alt="Screenshot"></p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>Here is a code snippet of my set up: </p>
  
  <pre><code>$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;
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>#header{
  margin-left: -$grid-padding;
  margin-right: -$grid-padding;
  padding: 0 $grid-padding;
  margin-bottom: 1em;
  }
  </code></pre>