Adding Custom Header

I need help with my blog. Take a look the header is all messed up.

http://www.successrei.com

Tried to add custom header graphic that is supposed to look like this:

http://www.successrei.com/header1.htm

It’s like there is a padding or something keeping it from flowing smoothly

Here is the CSS stylesheet:

/* CSS Document */
body {
background:#D2D2D2;
word-spacing:-1px;
color:#444;
font-size:14px;
margin:0;
padding:0;
}

#wrap {
width:920px;
background:transparent url(images/content.gif) repeat-y;
margin:0 auto;
}

#container {
padding-top:14px;
margin:0 auto;
}

h2 {
font-size:1.4em;
padding-left:8px;
font-family:’trebuchet ms’, helvetica, ‘sans serif’;
font-weight:400;
}

h3.pagetitle {
color:#666;
text-align:center;
font-family:’Lucida Grande’, Verdana, Arial, Sans-Serif;
font-weight:400;
font-size:14px;
padding-top:4px;
}

img a {
border:0;
margin:0px;
padding:0px;
}

#random {
background:#FFC;
text-align:center;
color:#000;
font-size:13px;
font-family:Verdana;
border-bottom:1px solid #fc0;
text-transform:capitalize;
padding:4px;
}

.header {
background:transparent url(images/header1.jpg);
height:173px;
width:100%;
position:relative;
color:#000;
margin:0 auto;
padding:0;
}

.header h1 {
height:30px;
font-size:30px;
font-family:’Trebuchet MS’, Arial, sans-serif;
text-decoration:none;
font-weight:400;
padding-left:50px;
padding-top:50px;
margin:0 auto;
}

.header a {
color:#fff;
text-decoration:underline;
background:transparent;
}

.description {
height:30px;
font-size:20px;
font-family:’Trebuchet MS’, Arial, sans-serif;
text-decoration:none;
font-weight:400;
color:#FFF;
padding-left:40px;
padding-top:5px;
background:transparent;
margin:0 auto;
}

#nav {
height:5px;
width:880px;
font-size:14px;
font-family:’Trebuchet MS’, Arial, sans-serif;
text-decoration:none;
font-weight:400;
color:#FFF;
background:transparent;
margin:0 auto;
padding:0;
}

Willing to pay for your help!!!
Derek