Hi

We trying to center a horizontal list menu used for our main navigation in a variable window where there is no restriction depending on screen resolution. We want the menu ul to align center. here is the css:

/* horizontal Navigation bar */

body
{
margin: 0;
}


#hNav
{
background-color:#000066;
margin-left: auto;
margin-right: auto;
padding: 0;
font-family: Arial, Verdana, Tahoma, Sans-Serif;
font-size: 0.9em;
color:#FFFFFF;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}


#hNav ul
{
margin: 0;
padding: 0;
font-weight: bold;
font-size: 1.0em; /* eventually will be % */
white-space:nowrap;

}

#hNav li
{
float: left;
margin: 0;
padding: 0;
list-style: none; /* no bullet markers */
border-left: 1px solid #ccc; /* separator between list items */
}

/* 1st list item has no left border */
#hNav li.last {
border-right: 1px solid #ccc;
}

#hNav li a
{
display: block; /* expand to fill parent li */
margin: 0; /* no space between anchors */
padding: 4px 4px 4px 4px; /* space above and below text */
text-decoration: none; /* no underline */
color: #fff; /* override default link color */
background-color: #006;
text-decoration:none;
}

#hNav li a:hover
{
display:block;
background-color:#006666;
color: #fff;
}

/*

#hNav li a
{

The background properties for the default using shorthand:

background: #fff url(mArrow.gif) 0 -20px no-repeat;

*/

#hNav li a#current
{
color: #ccc;
border-right: 1px solid #ccc;
}

.clear {
clear: both; /* under all floats */
margin: 0;
overflow: hidden;
}


and here is the html:
<!-- this file holds the html only for the horizontal navigation that sits below the header -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-gb" />
<meta name="author" content="webcoordinator@msd.govt.nz" />
<meta name="copyright" content=" Ministry of Social Development" />
<link rel="stylesheet" type="text/css" href="css/hNav.css" />
<title>Horizontal Navigation Panel</title>
</head>

<div msdid="navigation" id="hNav">
<body>
<div id="hNav">
<ul>
<li><a href="our-org/index.html">Our<br />Organisation</a></li>
<li><a href="whats-happ/index.html">What's<br />Happening?</a></li>
<li><a href="employees/index.html">Resources<br />for Employees</a></li>
<li><a href="groups/index.html">For Business<br />Groups &amp; Units</a></li>
<li><a href="procedures/index.html">Procedures,<br />Policies &amp; Forms</a></li>
<li><a href="managers/index.html">Resources<br />for Managers</a></li>
<li class="last"><a href="it-support/index.html">IT<br />Support</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>


any suggestions would be very appreciated as we are idea'd out *sigh*

thanks so much
Felicia