Hi, thanks for checking my question.
Under my banner on WP you see that is a red border. I want to extend that border beyond the banner's width; to extended till the edge of the browser.
I added below a screenshot of the blogger view that has that border extended like that. Hope you can see that pic and that will help understand what I mean. :)
Thanks!Screenshot of banner

Your max-width on your #page is set to 1000px, so you'd have to change that (it's too small).
However, the body is set to have padding on either side, I suspect so that the pink color under there shows through. So you'll have to set your body to have 0 padding, too.
Then take your #main attribute and set it back to max-width 1000px (so it's not taking up your whole page), and set the margins on #main so:

margin-left: auto;
margin-right: auto;

Then you'll have to go into #branding img and I would re-upload an image that is the right size. If you set the width to 100%, you could upload an image with a generous white space to the left and right to ensure that you don't stretch the image to fit. By setting the width to 100%, you get the border all the way across the bottom.

This *might* work as a starting point. It does take over the body background, which means it overrides the built in functions for background images such as on Appearance → Background pages. If you plan to keep the background white, it may work for you. Also, note that this moves the banner to be the very first thing on the the page.

@zandyring I copied and pasted what you posted and didn't work. I am not good with coding, I guess I am missing something. any chance you could spell it out where to change #page and #branding? Thank you!

Thank you so much! it is back!
The red bar is overlapping the header thou. I changed the height to 220px and something else is overlapping now. Seems to be the menu bar. I found on another thread this code:

#branding #searchform {
display: none;
}

but didn't work. any suggestions?
by the way I don't mind removing the menu bar completely. I actually prefer that.
Thank You!

The overlapping is probably happening because the new image you uploaded is a slightly different size than your original. Try updating the custom-background height to 228px and the margin-top value for #page to 233px. Note that you can fiddle with the numbers until they look good to you.

To completely get rid of the entire header (the old one that you're not using), including the menu bar, look in your CSS and change this: