Help centering text in horizontal Nav bar

Question

I have just built my styles for my Nav bar and i am trying to figure out how to place everything centered in the div.
at the moment they are offset to the left. Fairly new to this.
here is my CSS code and underneath the HTML
Thanks so much for any help you can give me
J
ul.nav {
    background-color: #FFF;
    padding-left: 15px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-bottom-color: #ababab;
    border-top-color: #afafaf;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    text-decoration: none;
    color: #666;
    line-height: 2.5;
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #ababab;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    color: #09F;
    background-color: #FFF;
ul.nav li {
    display: inline;
/* ~~ The footer styles ~~ */
.footer {
    padding: 10px 0;
    background: #CCC49F;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
  </div>
<div id="navbar">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Articles</a>
</li>
<li><a href="#">Archives</a>
<li><a href="#">Local Reporter</a>
</li><li><a href="#">Sign up</a>
</li><li><a href="#">Contact Us</a></li></ul>
</div>
Thanks again!

Answer 1

ahh sorry...here you go
ul.nav {
     background-color: #FFF;
     padding-left: 15px;
     border-top-width: 1px;
     border-bottom-width: 1px;
     border-top-style: solid;
     border-bottom-style: solid;
     border-bottom-color: #ababab;
     border-top-color: #afafaf;
     width: 960px;
     margin-right: auto;
     margin-left: auto;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
     text-decoration: none;
     color: #666;
     line-height: 2.5;
     display: inline-block;
     padding-right: 15px;
     padding-left: 15px;
     border-right-width: 1px;
     border-right-style: solid;
     border-right-color: #ababab;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
     color: #09F;
     background-color: #FFF;
ul.nav li
/* ~~ The footer styles ~~ */
.footer
.weather
#weather sidebar1
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
     float: right;
     margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
     float: left;
     margin-right: 8px;
.clearfloat { /* this class can be placed on a
or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
     clear:both;
     height:0;
     font-size: 1px;
     line-height: 0px;
#apDiv1
-->
</style></head>