Flexible Width's for Horizontal Spry Menu Bar

Question

I have a horizontal menu bar with a fixed width for my site. Some of my words are too big for the widths of the buttons and they become off centered or sometimes they don't render correctly. Is there a way to make the top level buttons different sizes to fit the words correctly with the fixed width of the entire bar. This is my site if you want to check out what I mean.

http://www.rsd17.org/test

You'll see that community and quicklinks are not centered. on chrome-Linux browswer they over lap and don't look correct. Any help would be great. Im sure there is something in the CSS that can be tweaked, just not sure which.

Answer 1

You can remove the left / right padding on the links and instead set them to text-align: center:

ul.MenuBarHorizontal a {
    padding: .66em 0;
    text-align: center;
}