Need HTML help, please

I have a Blogger blog (http://theconsummategardener.com), and I can't figure out how to center the header image. This is the code. Where do I put the "center" for the image? Thanks!

/* Header
-----------------------------------------------
*/

#header-wrapper {background:url(http://i19.photobucket.com/albums/b172/debinflorida/blogger/cgheader2.jpg);
width:800px; height:235px;
margin-left: 0; margin-right: 0; margin-top: 0
border:0px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: 0;
margin-right: 0;
}

#header {
margin-left: 0; margin-right: 0; margin-top: 0;
border: 0px solid $bordercolor;
text-align: left;
color:#ffffff;
}

#header h1 {
margin: 0;
padding-left: 10px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont; display:none; /*<---Hiding blog title and description*/
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:800px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

 

Try this solution (just add top center after image as shown below). Let me know if it works.

#header-wrapper {background:url(http://i19.photobucket.com/albums/b1...gheader2.jpg) top center;
width:800px; height:235px;
margin-left: 0; margin-right: 0; margin-top: 0
border:0px solid $bordercolor;
}

 

the picture doesn't work btw
html looks complicated

 

That didn't work. It's strange with the Blogger code, because there is always something, somewhere that messes it up.

 

what do you mean it doesn't work?

Blogger HTML is always complicated. You have to leave most of the unnecessary code in to make it work. That's just the way it is.

 

Here's the div code. Do I need to change this too?

<div id='outer-header'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='The Consummate Gardener (Header)' type='Header'/>
</b:section>
</div>
</div>

 

maddie change this width:800px; to this width:100%; and your problem is solved.

should look like this
background-image: url(http://i19.photobucket.com/albums/b172/debinflorida/blogger/cgheader2.jpg); min-height: 235px; background-repeat: no-repeat; background-position:center; width: 100%;" id="header-inner">

 

thanks, I'll try it.