960 Grid System Navigation Bar Issue

Question

I'm trying to get my navigation bar to extend across the whole container of the 16 Column Grid . In Chrome is doesn't extend all the way across. In Firefox it shows up very weird. Which is telling me that I am breaking the grid some how. Can someone please help with this? Here is my code:

<div class="container_16" id="container">
    <div class="grid_16" id="header image">
        <img src="img/condley-employees.png" />
    </div><!-- end of header image -->
    <div class="clear"></div>

    <div class="container_16 clearfix" id="main-nav" align="center">
        <ul>
            <li><a href="#">HR</a></li>
            <li><a href="#">Departments</a></li>
            <li><a href="#">Employee Fun</a></li>
            <li><a href="#">Marketing</a></li>
            <li><a href="#">Calenders</a></li>
            <li><a href="#">Misc.</a></li>
        </ul>
    </div><!-- end of navigation -->

CSS:

#main-nav ul {
    margin: 3px;
    padding: 0;
    list-style: none;
    width: 940px;
}

#main-nav li { 
    display: inline;
}

#main-nav li a { 
    text-decoration: none;
    padding: 5px 0;
    width: 150px;
    background: #006699;
    color: #eee;
    float: left;
    text-align: center;
    border-left: 1px solid #fff;
}

Answer 1

It appears you are missing the closing div of the container

  </div><!-- end of container-->

As a result you are nesting a container in a container.

Also you should be adding a grid_16 class to your #main-nav ul and not specifying a height.

You should read some resources on using the grid system:

http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/ http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/

---

Update:

Changing

<div class="container_16 clearfix" id="main-nav" align="center">

to

<div class="grid_16 clearfix" id="main-nav" align="center">

Should fix your issue

Answer 2

I hope this solution may help. The red border is the container bounding. Tell me if I misunderstood some thing.

The JSBin link: http://jsbin.com/oludot/1/edit