Centering Menu Items in 2011 Theme

https://www.aninchofhope.com

Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting in your child theme. Or use whatever developer tool is available in your web browser.

You have quite a bit of “messy” CSS affecting that – see the changes made here:

#access {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
    clear: both;
    display: table;
    float: none;
    margin: 0 auto 6px;
    width: auto;
}

Remove #access ul from this too:

#branding, #main, #footerMenu ul, #access ul {
    margin: 0 auto;
    width: 1000px;
}

@wpyogi,

Thank you for your help,…
I copied & pasted the above code (#access) into my child theme, & unfortunately, it is still left justified.

As for the #aaccess ul code, I am uncertain which that one that is in my child theme.

Can you offer anymore insight?

Find this:

#branding, #main, #footerMenu ul, #access ul {
    margin: 0 auto;
    width: 1000px;
}

and change to:

#branding, #main, #footerMenu ul {
    margin: 0 auto;
    width: 1000px;
}

You also should CHANGE/REPLACE the existing section of this:

#access {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
    clear: both;
    display: table;
    float: none;
    margin: 0 auto 6px;
    width: auto;
}

Try to avoid just adding more and more (duplicate) CSS.

@wpyogi,

Thank you for your insight,…
Menu is now centered.

madisunanne.