how do I center justify the page menu across a set width?

Hi, first off, this is a great theme and an even better support forum. I am having trouble putting the finishing touches on my page menu bar. The website I am working on is bemorebold.com

The look that I want for my page menu is from this website: http://athleticgreens.com

What I want is where the page menu spans the entire width of the website but the menu items are centered/justified across the length of the center column so they are always aligned, regardless of window size.

I made some changes to my site (with the help of this forum).

To make the full width header with the fixed with center column, I used a 100% layout width with a
div.wrapbody{
width:910px !important;
in the css inserts. I am not sure if that is affecting things.

I tried wrapping the the %page-center inside a div. When I did that, the menu is 910px, but it is left justified across the page (see attached image) and does not span the entire length of the website.

this is the code I used which didn't look right:
%bar2 <div style="width: 910px;">%page-center</div>


What I would like is for the page menu to be centered, the page menu bar span the entire website, with the width of the menu items being 910px (same as the body of the site) and the items inside the menu being spaced equally across that 910px span. I want the edges of the page menu items aligning with the left and right sides of the center span regardless of window size.

I can make it look close to what I want with this:

div#menu1 ul.rMenu {
background: transparent;
border: none;
padding-left: 40px;
width: 910px;

but is still not center justified across the body text, and when I resize the website, it sometimes looks funky.

I'm hoping there is something I am missing that will make everything work out well. Any help would be appreciated.