[Can't Line Up Image Used As Header]

Thanks for your help. I used your code, then added "height: 30px;" to the Navigation Bar to increase vertical size, and also added "margin: 5px auto;" to both the Navigation & Footer to space them apart vertically. I hope this is correct.

 

URL: http://xrl.us/behk3k

 

New CSS:

=======

 

#wrapper {

margin: 0 auto;

width: 822px;

}

 

#header {

width: 806px;

height: 154px;

margin: 0 auto;

background-image : url(images/header_test.jpg);

background-repeat : no-repeat;

}

 

#navigation {

width: 800px;

height: 30px;

color: #FFFFFF;

padding: 0px;

border: 1px solid #ccc;

margin: 5px auto;

background: #000000;

}

 

#content {

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 0px auto;

padding: 0;

height: 350px;

}

 

#footer {

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 5px auto;

padding: 0;

}

[Can't Line Up Image Used As Header]

Hi,

 

I am very new to CSS and am finding it an uphill battle....

 

I'm trying to modify a template. How do I get the image (marked "Test Header", 806 pixels wide) that I am using as a header, to line up with the rest of this page? I don't understand why it is displaying narrower than the other sections.

 

-Thanks

 

Here's the URL: http://xrl.us/behk3k

===========

 

Here's the CSS:

===========

 

* { padding: 0; margin: 0; }

 

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

}

#wrapper {

margin: 0 auto;

width: 822px;

}

#header {

width: 806px;

height: 158px;

margin: 0 auto;

background-image : url(images/header_test.jpg);

background-repeat : no-repeat;

}

#navigation {

width: 800px;

color: #FFFFFF;

padding: 10px;

border: 1px solid #ccc;

margin: 0px 0px 5px 0px;

background: #000000;

}

#content {

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 0px 0px 5px 0px;

padding: 10px;

height: 350px;

}

#footer {

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 0px 0px 10px 0px;

padding: 10px;

}