Huge Banner Padding

Question

I added a banner into a webpage, www.torontopoet.com/etsystories and now below the banner is a huge chunk of blank space before the content begins. This is the code I used for the banner:

<div id="banner"> 
</div>
 <style>
html,body
{ height:100%;
width:100%;
}
#banner {
background:url('.png');
width:100%;
height:100%;
background-size:100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
 }
</style>

Answer 1

Without seeing your HTML too, I really can't say anything, but...

#banner {
background:url('.png');
width:100%;  
height:100%; <!--- ? --->
background-size:100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}

Are you sure you want the banner to be 100% of the height of its container?

Answer 2

html,body
{ 
height:100%;
width:100%;
}
#banner 
{
background:url('http://cdn2.hubspot.net/hubfs/418991/realview.jpg');
width:400px;
height:251px;
display:block;
background-size:cover;
background-repeat: no-repeat;
margin:0 auto;
}