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.

I have had success wrapping the %pages in a div with an ID and then giving it a width and auto left and right margins. To space the menu items means fiddling with CSS.

OK so I ended up using this code in the css inserts:

ul.rMenu li a {width:162px; text-align:center;}

which gave me what I wanted (evenly spaced page menu items that spanned the center 950px. the only problem is that it is offset to the left by 40 pixels. I have to use this code (the padding-left part)

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

which pushes the menu to center. This looks great as long as the screen is maximized, but as soon as the window gets minimized, the menu shifts over again.

Any idea why I need the padding-left:40px to begin with?

I would really like the page menu to be flush with the center column regardless of the screen width.

I just figured it out. Here's what I did for reference:

To make the page menu span a certain width (X) and have the individual menu items be evenly spaced:

First go to ato>style & edit header area>configure header area
type %page-center

i.e. %bar2 %page-center %bar1

next go to ato>style & configure layout>layout min width
set it as the same as the page menu width (x)
(this prevents the page menu from wrapping when the window is narrow)

finally go to ato>add html/css inserts>css inserts
type in: ul.rMenu li a {width:162px; text-align:center;}

Play with the width until it is evenly spaced.

There is potentially a better way to space the page menu options, see:
http://forum.bytesforall.com/showthread.php?t=13379

but I couldn't figure out where to insert the margin-right: auto and margin-left: auto.

This is all info I have gathered from this wonderful forum.

Enjoy!