header: seperate background and border-bottom – *how??*

Hi!

I’m trying to seperate my header image from a border below it.

1. the border should cover the whole page, but when I change its widht, the image moves to the left (it’s supposed to be centered) and is repeated. Do I have to add some snippet to “background” and then change the widht? Or is there a way to seperate both parts?

2. The margin between the header image and the border is annoying me. I want to have it on top as well, but just don’t find where to do that.

#header {
    background: url("/wp-content/uploads/Small2.jpeg") repeat-x scroll 0 0 transparent;
    border-bottom: 10px solid #CE3000;
    height: 221px;
    margin: 0 auto;
    padding: 20px 0;
    width: 631px;
}

Pastebin CSS: http://pastebin.com/FajtmDr7
Pastebin HTML: http://pastebin.com/CqZvYL3E

Using retro-fitted theme.
Thanks for any attempt to help!