Align a navigation menu to the center

Question

I need to get my navigation menu centered.

You can see my current menu at: www.financialconsultingcareers.com

Here is the code:

#hor_nav
{
    width: 100%;
    color: #000000;
    background: #f1f1f1;
    font-size: 20px;
    font-family: helvetica;
    font-weight: bold;
    height: 32px;
    z-index: 1000;
    Margin-top: -25px;
    border-bottom: 5px solid #254117; 
    box-shadow: 0px 5px 5px #888888;  
    margin-bottom: 25px;
    text-align: center;
}

#hor_nav UL
{
     margin: 0; 
}

#hor_nav LI
{
    list-style: none;
    display: center;
    float: left;
    margin-left: 3px;
    padding: 0;
    height: 32px;
    position: relative;
    text-transform: capitalize;
    text-align: justify;
    border-right: 1px solid #000001;

    <!--left: 2.5%;-->

}

div.#hor_nav, ul.#hor_nav li.active a 
{
    border-radius: 5px 5px 0 0;
    margin-right: 3px;
}

#hor_nav LI A
{
    display: inline-block;
    padding: 0 18px;
    line-height: 32px;
    margin-right: 3px;
    color: #000;
    font-weight: normal;
    font-size: 100%;
    text-decoration: none;
    border-radius: 5px 5px 0 0;
    text-align: justify;   
}

#hor_nav LI.active A
{
    border-radius: 4px 4px 0 0;
    background-color: #254117;
    color: #FFFFFF;
    font-weight: normal;
    padding-bottom: 4px;
    margin-top: -4px;       
}

#hor_nav li:last-child
{
    border-right: none;
}

#hor_nav LI A:hover, 
#hor_nav LI:hover A, 
#hor_nav LI.sfHover A
{
    background: #828282;
    color: #FFF;
    text-decoration: none;
    border-radius: 5px 5px 0 0;
    padding-bottom: 4px;
    margin-top: -4px;  
}

#hor_nav LI UL
{
    position: absolute;
    width: auto;
    left: -999em;
    margin-left: -4px;
    border-radius: 5px 5px 0 0;
}

#hor_nav LI UL UL
{
    margin: -31px 0 0 170px;
    border-radius: 5px 5px 0px 0px;
}

#hor_nav LI:hover UL UL, 
#hor_nav LI:hover UL UL UL, 
#hor_nav LI:hover UL UL UL UL, 
#hor_nav LI.sfHover UL UL, 
#hor_nav LI.sfHover UL UL UL, 
#hor_nav LI.sfHover UL UL UL UL
{
    left: -999em;
}

#hor_nav LI LI
{
    margin-left: -20px;
    padding: 0;
    font-size: 80%;
    height: auto;
    text-align: justify;
    background: #CCC;
    width: 225px;  
    border-radius: 0 0 0 0;
    box-shadow: 0px 3px 3px #888888;
}

#hor_navLI LI A, 
#hor_nav LI LI.active A, 
#hor_nav LI LI A:hover
{
    margin: 0;
    height: 30px;
    line-height: 30px;
    background: #828282;
    color: #FFF;
    border-radius: 5px 5px 5px 5px;
}

#hor_nav LI LI A, 
#hor_nav LI.active LI A
{
    font-weight: normal;
    border-radius: 5px 5px 0 0;
}

#hor_nav LI:hover UL, 
#hor_nav LI.sfHover UL
{
    left: 4px;
}

#hor_nav LI LI:hover UL, 
#hor_nav LI LI LI:hover UL, 
#hor_nav LI LI LI LI:hover UL, 
#hor_nav LI LI.sfHover UL, 
#hor_nav LI LI LI.sfHover UL, 
#hor_nav LI LI LI LI.sfHover UL
{
    left: 0;
}

#hor_nav LI
{
    list-style: none;
}

Answer 1

It does not solve everything, but if you add a fixed width (say, width: 700px) to the <ul class="hor_nav">, the menu is centered (however, the background does not persist through the full width of the page, but you have to set the background to a different element in order to support that).

You must specify a fixed width in order for margin-left: auto and margin-right: auto to center the element.

There is no such thing as position: center. You can drop that one.

By the way, I notice the top logo is shrunk when you resize the page. Beware. ;)

Answer 2

If you want to center your navigation menu, you need to set a fixed width value to your UL. This is going to change how you implement your design though. So you may need to use the parent div in order to apply your border and background colors.

Answer 3

You have to specify a certain width. 100% would not work...

Example:

#hor_nav {
   width: 500px;
   margin: 0 auto;

The margin: 0 auto will centre it dead on but it will only work if you have a certain width applied to your element.