CSS Problem... annoying!

1

ok, so this is really annoying me now!

i went to make a css template for a project im working on and i have 4 divs with a background image:

  1. Header
  2. Nav
  3. Content
  4. Footer

but when i preview the site… there is a white gap out site the content div, so for example it looks like:

1)Header
2)Nav

3)Content

4)Footer.

how do i fix this??

csscode

@charset "utf-8";
/* CSS Document */

body{
	margin: 0px;
	padding: 0px;
}

.header {
	margin: 0 auto;
	background-image:url(header.png);
	width: 800px;
	height: 150px;
	background-repeat:no-repeat;
}

.nav {
	margin: 0 auto;
	background-image:url(nav.png);
	width: 800px;
	height: 25px;
	background-repeat:no-repeat;
}

.content {
	margin: 0 auto;
	background-image:url(nav.png);
	width: 800px;
	height: auto;
	background-repeat:repeat-y;
}

.footer {
	margin: 0 auto;
	background-image:url(footer.png);
	width: 800px;
	height: 100px;
	background-repeat:no-repeat;
}

Thanks, :love: