I found the thread about centering the page menu horizontal bar. I applied that CSS code to the HTML-CSS inserts area. That covered the Page menu bar only. I added it again, this time without the number 2, and that centered the Category menu bar as well.

Then I decided to make the bars stand out by giving them contrasting background color. Now, of course, I have menu item dividers, with the main background color showing through. I don't want that....plus, now there is an extra empty item showing at the far right of the category menu. I set both to 680px. http://larchmontgazette.com/wp27/

How can I get the effect I want?

Here's the CSS I put in the insert:

ul#rmenu2 {
margin: 0 auto;
border: 0;
width: 680px;
}

/* Safari Hack: it renders the menu wider and needs 
a few pixels more or it will wrap the last menu item. */
@media screen and (-webkit-min-device-pixel-ratio:0){
ul#rmenu2 {width: 680px;}
}

ul#rmenu {
margin: 0 auto;
border: 0;
width: 680px;
}

/* Safari Hack: it renders the menu wider and needs 
a few pixels more or it will wrap the last menu item. */
@media screen and (-webkit-min-device-pixel-ratio:0){
ul#rmenu {width: 680px;}
}

Item dividers: Those are borders around the <A>'s. One way to remove them would be t change the border color of the <A>'s to the background color of the <LI>'s

ul#rmenu li a {
border:1px solid #506286;
}

To give the submenus another border:

ul#rmenu li ul li a {
border:1px solid #123456;
}

Third level:

ul#rmenu li ul li ul li a {
border:1px solid #654321;
}

The empty tab on the right is caused by the background color of the whole menu bar

ul#rmenu {
background: none; 
}

(currently set to #506286)