problem styling list/menu

[nitro29]

Hi,

I have trouble styling my list-based menu. I would like the leftmost and rightmost menu items with equal margin to the wrapper (in the center of the wrapper). I have tried applying margin-left:auto, margin-right:auto to ul.menu. However this does not seem to work. I have also played around a long time with the Firefox Developer Toolbar - but I can't seem to find my mistake... What am I doing wrong?

This is the relevant code:

<div id="navMenu">
<div class="moduletable_menu">
<ul class="menu">
<li class="item-435"><a href="/joomla17/" >Forside</a></li>
<li class="item-499 parent"><a href="/joomla17/index.php/nyheder" >Nyheder</a></li>
<li class="item-477 current active parent"><a href="/joomla17/index.php/foreninger" >Foreninger</a></li>
<li class="item-466 parent"><a href="/joomla17/index.php/2012-01-13-12-37-11" >Turistinformation</a></li>
<li class="item-465 parent"><a href="/joomla17/index.php/om-nyord" >Om Nyord</a></li>
</ul>
</div>
</div> <!--navMenu END-->

#navMenu {
height:60px;
width:960px;
background: #f1f7e2 url(../images/gradient2_alt.png) repeat-x top left;
}

#navMenu ul.menu {
margin:0;
padding: 5px 0 0 0;
list-style-type: none;
text-transform: uppercase;
font-size: 1.385em;
}

#navMenu li {
float: left;
}

#navMenu ul a:link,
#navMenu ul a:visited {
font-weight: bold;
padding: 0 25px 0 25px;
vertical-align: middle;}

a:hover and visited states are also applied, but not interesting in this context.

Any help would be greatly appreciated!! Thanks.

-nitro29

[jackdaniels]

Put right and left padding on the wrapper instead of on the navigation. Depending on your code you might have to split up your wrapper into sub-sections such as: Header container, navigation container, content container, then footer container. Doing this will separate the navi from the other sections and give you the ability to have different padding for each section.