I'm trying to get my horizontal menu button width to resize automatically. However many buttons (i.e. nav menu items) I have, I'd like the width to adjust automatically so they space themselves to fill the full page width. I found a solution to extend the menu bar (i.e. background color) the full width of the page, but I have not been able to get the menu items to expand into it. Since I want to keep the layout responsive, and may be adding menu items in the future, it would be nice if I didn't have to do this manually with padding and margins.

I tried juggledad's solution:

div#menu1 ul#rmenu2 li.menu-item {width: 10%;} (changing this to 16% since I have 5 menu items)
div#menu1 ul#rmenu2 li.menu-item ul li {width: 100%;}

but the overall width of the menu didn't increase - instead, it caused the buttons to overlap each other. It's behaving a lot like there is a fixed width built in to the menu (it also doesn't wrap on a smaller screen size, which I'd like it to do - is that a separate issue?).

Can anyone give me a hand with this? Here's my site: http://mihansa.net

Thank you!

What was done in my case and worked fine although its not automatic..

/* the bar across the screen and border */
#bfa_page_menu {border: solid 2px #000; background-color: #A50D12;}
#bfa_page_menu div#menu1 {border:solid 2px #A50D12;} /* removes the bar at either end of the menu*/

/* format the text */
ul.rMenu li a {
color:#fff!important; /* white */
font: 14px arial,helvetica,lucida sans !important;
text-transform:uppercase;
}

/* and spread them out */

div#menu1 ul.rMenu li a {
padding-left: 35px;
padding-right: 35px;
}

#menu1 .rMenu-ver {
line-height: 1.2em !important; /* This adjusts the height of items in the menu and submenu */