I have searched for this answer high and low and am at a loss how I can left-align my menu bar with the page content.

This is what I would like:
I would like to align the menu bar with the page content. I would like my "Home" hyperlink to line up with the dashed left-column, above the "Hello World!"

For example this is what I do not want:
http://www.enjoybeingfrugal.com

This is what I have done:
I have changed the Header Area, Style & edit HEADER AREA to %page-center, but it only centers below the Ben Franklin on my site. I've just changed The Configure Header Area back to %pages, but the menu aligns all the way to the left.

I have also perused the Add HTML/CSS Inserts section & I'm not sure if I should add something in that area or not. I've installed Firebug with hopes that will help me solve the issue and here's what I see:

<div id="wpadminbar" class="no-grav" role="navigation">

I am unclear as to what code I should add and to where I should add it.

I really appreciate any assistance you can offer.

Kindly,
Jane

If I understand what you want you could just add padding to #rmenu2 by putting the following in the CSS Inserts box.

#rmenu2 {
    padding-left: 10px;
}

I just used Firebug to determine the selector.