CodingForums.com - Slightly Indented Nav Bar

Hi,

Please see attached the screenshot of a little mockup page I'm doing, the nav bar is indented slightly to the right and I can't figure out why? I am using a grid system and you can see both my style.css code and grid.css code below.

the nav is labelled id="nav" so css should be simple enough to read

Code:

body {

        background: #1B56E0;

        font-family: Arial;

        color: #F5F5FA;

}



h1 {

        font-family: 'Orienta', Arial;

        font-size: 1.75em;

}



#nav {

        padding: 0 0 20px 0;

        margin: 0 0 20px 0;

        list-style: none;

        float: left;

        text-decoration: none;

}



#nav li {

        float: left;

        margin-right: 40px;

        list-style-type: none;

}



#nav li a {

        text-decoration: none;

        color: #F5F5FA;

}

Code:

/*

 Width: 1000px

 # Columns : 12 

 Column width: 65px

 Gutter : 20px 



 */

.grid_1 { width: 65px; }

.grid_2 { width: 150px; }

.grid_3 { width: 235px; }

.grid_4 { width: 320px; }

.grid_5 { width: 405px; }

.grid_6 { width: 490px; }

.grid_7 { width: 575px; }

.grid_8 { width: 660px; }

.grid_9 { width: 745px; }

.grid_10 { width: 830px; }

.grid_11 { width: 915px; }

.grid_12 { width: 1000px; }



.grid_1,

.grid_2,

.grid_3,

.grid_4,

.grid_5,

.grid_6,

.grid_7,

.grid_8,

.grid_9,

.grid_10,

.grid_11,

.grid_12 {

        margin: 0 20px 10px 0;

        float: left;

        display: block;

}



.alpha{margin-left:0px;}

.omega{margin-right:0px;}



.container{

        width: 1000px; 

        margin: auto;

}







.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

Any ideas?