960gs padding left when using prefix - am i doing it right?

Question

This is my first attempt at building my design from scratch (normally I use free css templates). I've decided to try out 960gs, as the grid approach is easier for me to grok than other frameworks.

I'm having an issue where padding fills to the left and takes on the background colour of my element (but I wasn't expecting it to work like this).

Here is what I have;

HTML

  <!-- start nav -->
  <div class="clear"></div>
  <div class="grid_8 prefix_2" id="nav">
    <p>nav</p>
  </div>
  <!-- end nav -->

CSS

body {
  background: #EEEEEE;
  color: #333;
  font-size: 11px;
  height: auto;
  padding-bottom: 20px;
}

div#nav {
  background-color: #FEFEFE;
}

my nav element starts two grids to the right and extends for 8 grids, sweet! But, because it's padded out to the left (two grids) my nav background colour bleeds out into what I want to be my page background colour, not sure if I'm doing this right?

If I add an element of 2 grid sizes before the nav, things are better i.e.;

  <!-- start nav -->
  <div class="clear"></div>
  <div class="grid_2 " ><p>a</p></div>
  <div class="grid_8 " id="nav">
    <p>nav</p>
  </div>
  <!-- end nav -->

Is this the expectation? I thought supplying a prefix would negated the need to fill a whole row with the exact right amount of grid elements?

Hopefully I've articulated my problem clearly (if you're familiar with 960gs), if not let me know an I'll elaborate more, somehow.

Cheers

EDIT - potential answer

I feel a bit stupid - perhaps this is the intended usage?

  <!-- start nav -->
  <div class="clear"></div>
  <div class="grid_8 prefix_2">
  <div id="nav"></div>
  </div>
  <!-- end nav -->

Answer 1

This is what I've chosen to do... I works well, and it seems pretty logical when you see it.

  <!-- start nav -->
  <div class="clear"></div>
  <div class="grid_8 prefix_2">
      <div id="nav"></div>
  </div>
  <!-- end nav -->

Answer 2

<!-- start nav -->
<div class="clear"></div>
<div class="prefix_2 " ></div>
<div class="grid_8 " id="nav">
<p>nav</p>
</div>
<!-- end nav -->

How about this?

it seems more logical this way.

or you can just add css atributes to .grid_8 whitout the prefix class?