Question

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!

Answer 1

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;
}