CSS Centering Issue for Navigation Menu

I need some help with some CSS coding. I have been trying to get this navigation menu to center on the page and no matter what I do, I cannot get it to work. I have tried padding-left, margin-left, text-align:center, and nothing works. The menu continues to remain more to the left than the right.

Here is a screenshot of the problem: http://i132.photobucket.com/albums/q38/blacktiphunter/center.jpg

I'm sure it's something very simple, but I just can't seem to figure out what I am doing wrong?

Here is the live link of the page: http:开发者_运维问答//blacktiphfishing.org/test.html

Any help is greatly appreciated!

If you remove the

margin:0; from #nav

it looks centered.

Tested in Chrome

first add overflow:hidden for #nav, #nav ul to clear floats. Then add margin:0 auto .But this always require a fixed width, so set it, for example: width:760px So the new css is:

#nav, #nav ul {
    list-style: none outside none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 760px;
    z-index: 30;
}

CSS layouts can be a bit of a headache sometimes. Try using 'inspect element' in chrome or firebug in firefox to enable/disable and alter styles to get fine tuned adjustments

You need to specify the exact width of the MainMenu div and set his left-right margin to auto if you want to reach a correct centered layout.

The exact width would be 780px (150px * 5 (5 link each row) + 10px * 2 (10px left + 10px right border) + 2px * 5 (right margin of each li))

Use this css :

#mainMenu {
    background: none repeat scroll 0 0 #000000;
    border: 10px solid #000000;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 780px;
}

To get the nav section centered