Hey all, just looking for a little bit of help with my webpage. I have finished off my first, but cannot get rid of a large area of white space at the bottom of the page.

When I view with Chrome and inspect element, it says that there is a "<a href="#"> in the area which I guess is creating the whitespace. I have spent an hour looking through the HTML to find an extra href but with no joy.

Can someone tell me where I'm going wrong? I have also tried to set a height for the body, but this doesnt seem to have any effect. My HTML is:

<!DOCTYPE html>
	<link rel="stylesheet" type="text/css" title="woolton" href="style.css" media="screen">
<div class="container">
<div class="inner-container">
<nav class="helper-nav">
		<li><a href="#">Sitemap</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Plain Text Version</a></li>
		<li><a href="#">High Contrast Version</a></li>
</nav> <!-- end of top nav -->
<!--| HEADER |-->
	<div class="main-header"></div> 
	<div class="tree"></div>	
	<div class="sun"></div>
	<div class="bgbush"></div>
	<div class="grass3"></div>
	<div class="logo"></div>
<!--| CONTENTS |-->
<div class="content-container"><div class ="area"><div class="text" <p></p> </div>><div class= "photo"></div><div class="signature"></div><div class="grass1"></div><div class="bush"></div><div class="mrsjones"><p><br></p></div></div> </div> <!--end of content-container-->
<nav class="main-nav">
<li class="home-but"><a href="#">Home</li>
<li class="ps_topic_slug_about-us"><a href="#">About Us</li>
<li class="ps_topic_slug_parents"><a href="#">Parents</li>
<li class="ps_topic_slug_children"><a href="#">Children</li>
<li class="ps_topic_slug_community"><a href="#">Community</li>
</nav> <!-- end of main nav -->
<!--| FOOTER |-->
<footer class="main-footer"></footer> <!-- end of footer -->
</div> <!-- end of inner-container -->
<!--| POLICY LINKS |-->
<div class="ps-policy-links">
</div> <!-- end of ps-policy-links-->
</div> <!-- end of container -->