Page Menu not showing as full width of layout

I have been playing around with my site's styling and recently added a background image on the body outside of the layout. I've managed to get the header image and 1 of the menus to be the full width of the layout using the helpful FAQ, but not the other. Here's the site:
http://www.thedomesticfront.com - you can see that top menu isn't the full width

And here's what's in my HTML and CSS inserts box:
#bfa_page_menu {border: solid 1px #FFFFFF; background-color: #FFFFFF;}
div#menu1 {border: solid 1px #FFFFFF; background-color: #FFFFFF;}
#bfa_page_menu div#menu1 {border: none;}

#bfa_cats_menu {border: solid 3px #FFFFFF; background-color: #FFFFFF;}
div#menu2 {border: solid 3px #FFFFFF; background-color: #FFFFFF;}
#bfa_cats_menu div#menu2 {border: none;}

Any suggestions as to why that one menu (menu 1, pages) is still the wrong width?

Thanks!