trying to figure out how to use 960 grid from 960.gs

Shown below is both the css and the html i'm working with. I'm trying to put a navigation bar of sliced images at the very top. It is a horizontal navigation bar which uses images as buttons. probably about five buttons(meaning five sliced images). However i'm unsure whether i should put the sliced images in a list component and also i'm having problems getting the spacing and padding just right.

when i open up the site in my browser, i see a lot of spacing to the left to the top. How do i get rid of all the extra space? I want the navigation bar to be at the very top with no spacing or padding around it. please advise.

/*
  960 Grid System ~ Core CSS.
  Learn more ~ http://960.gs/

  Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
  min-width: 960px;
}

/* `Containers
----------------------------------------------------------------------------------------------------*/

.container_12 {
  margin-left: 0;
  margin-right: 0;
  width: 960px;
  position: absolute;
  top: 0;
  left: 0;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
  display: block;
  float: left;
  margin-left: 0px;
  margin-right: 0px;
  
  padding: 0px 0px 0px 0px;
  margin: 0;
  float: left;
  border= 0px;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11 {
  position: relative;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
  width: 60px;
}

.container_12 .grid_2 {
  width: 140px;
}

.container_12 .grid_3 {
  width: 220px;
}

.container_12 .grid_4 {
  width: 300px;
}

.container_12 .grid_5 {
  width: 380px;
}

.container_12 .grid_6 {
  width: 460px;
}

.container_12 .grid_7 {
  width: 540px;
}

.container_12 .grid_8 {
  width: 620px;
}

.container_12 .grid_9 {
  width: 700px;
}

.container_12 .grid_10 {
  width: 780px;
}

.container_12 .grid_11 {
  width: 860px;
}

.container_12 .grid_12 {
  width: 940px;
}

/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
  padding-left: 80px;
}

.container_12 .prefix_2 {
  padding-left: 160px;
}

.container_12 .prefix_3 {
  padding-left: 240px;
}

.container_12 .prefix_4 {
  padding-left: 320px;
}

.container_12 .prefix_5 {
  padding-left: 400px;
}

.container_12 .prefix_6 {
  padding-left: 480px;
}

.container_12 .prefix_7 {
  padding-left: 560px;
}

.container_12 .prefix_8 {
  padding-left: 640px;
}

.container_12 .prefix_9 {
  padding-left: 720px;
}

.container_12 .prefix_10 {
  padding-left: 800px;
}

.container_12 .prefix_11 {
  padding-left: 880px;
}

/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
  padding-right: 80px;
}

.container_12 .suffix_2 {
  padding-right: 160px;
}

.container_12 .suffix_3 {
  padding-right: 240px;
}

.container_12 .suffix_4 {
  padding-right: 320px;
}

.container_12 .suffix_5 {
  padding-right: 400px;
}

.container_12 .suffix_6 {
  padding-right: 480px;
}

.container_12 .suffix_7 {
  padding-right: 560px;
}

.container_12 .suffix_8 {
  padding-right: 640px;
}

.container_12 .suffix_9 {
  padding-right: 720px;
}

.container_12 .suffix_10 {
  padding-right: 800px;
}

.container_12 .suffix_11 {
  padding-right: 880px;
}

/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
  left: 80px;
}

.container_12 .push_2 {
  left: 160px;
}

.container_12 .push_3 {
  left: 240px;
}

.container_12 .push_4 {
  left: 320px;
}

.container_12 .push_5 {
  left: 400px;
}

.container_12 .push_6 {
  left: 480px;
}

.container_12 .push_7 {
  left: 560px;
}

.container_12 .push_8 {
  left: 640px;
}

.container_12 .push_9 {
  left: 720px;
}

.container_12 .push_10 {
  left: 800px;
}

.container_12 .push_11 {
  left: 880px;
}

/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
  left: -80px;
}

.container_12 .pull_2 {
  left: -160px;
}

.container_12 .pull_3 {
  left: -240px;
}

.container_12 .pull_4 {
  left: -320px;
}

.container_12 .pull_5 {
  left: -400px;
}

.container_12 .pull_6 {
  left: -480px;
}

.container_12 .pull_7 {
  left: -560px;
}

.container_12 .pull_8 {
  left: -640px;
}

.container_12 .pull_9 {
  left: -720px;
}

.container_12 .pull_10 {
  left: -800px;
}

.container_12 .pull_11 {
  left: -880px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Grid Layout</title>
        <link rel="stylesheet" type="text/css" href="./960_12_col.css" />
        <style>
            * {
                font-family: Arial, Verdana, sans-serif;
                color: #665544;
                text-align: center;}
            #nav, #feature, .article, #footer {
                background-color: #efefef;
                margin-top: 20px;
                padding: 10px 0px 5px 0px;}
            #feature, .article {
                height: 100px;}
            li {
                display: inline;
                padding: 5px;}
        </style>
    </head>
    <body>
        <div class="container_12 clearfix">
            <div id="header" class="grid_12">
                <div id="nav">
                    <ul>
                        <li><img src="./images/Slice-1.jpg"></li>
                        <li><a href="./aboutus.html"><img src="./images/Slice-2.jpg"></a></li>
                        <li><a href="">Services</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div id="feature" class="grid_12">
                <p>Feature</p>
            </div>
            <div class="article grid_4">
                <p>Column One</p>
            </div>
            <div class="article grid_4">
                <p>Column Two</p>
            </div>
            <div class="article grid_4">
                <p>Column Three</p>
            </div>
            <div id="footer" class="grid_12">
                <p>&copy; Copyright 2011</p>
            </div>
        </div><!-- .container_12 -->
    </body>
</html>

HTML:

 

My question would be why do you want to piss on accessibility and defeat the entire point of using CSS with some stupid framework that does nothing but build a broken fixed width layout and design elements ( like those multiple equal-width, equal-height subsections) that have no business on a website in the first place?

"Grids"... "Frameworks"... a crutch in the best of times, a sleazy shortcut at worst.

My advice, throw that asshattery in the trash, use semantic markup with even your ID's and classes saying what things ARE, not what they look like, and work from there.

 

960.gs is going to add padding and margins for you unless you add CSS for certain elements to tell it to do otherwise. This can get messy if you don't do it right. Usually when you design the site, you build it to the grid. Typically the pattern goes like this:

<div class="container_12">
<div class="grid_9">
Content goes here.
</div>
<div class="grid_3">
Content goes here.
</div>
</div>

Notice the grid classes equal 12. That's the max number of grid spaces you can have in a container_12 row.