Can't remove padding in footer

Question

My footer seems as though it has some type of imaginary (Unwanted padding in the top of the footer div... If you need an example of what I mean just visit my site) padding to it. If you view my sample link you will see what I am referring to.

<div id="footer">

<div id="Social">

<img src="img/Follow.png" width="339" height="21" alt="Follow on Social" style="position: relative; display:block;" />

<ul>
<li class="Twitter"><a href="#" target="_blank">Twitter</a></li>
<li class="Facebook"><a href="#" target="_blank">Facebook</a></li>
<li class="Youtube"><a href="#" target="_blank">Youtube</a></li>
<li class="Linkdin"><a href="#" target="_blank">Linkdin</a></li>
</ul> 

</div> <!-- Social -->

<div style="clear:both"></div>
</div> <!-- footer -->

My CSS:

#footer {
background-image:url(img/FooterBG.png);
height: 92px;
position: relative;
z-index: 10;    
padding: 0 35px;
left: 0px;
top: 82px;
}


#Social {
float: left;
width: 339px;
}


/* Social Links */

.Twitter a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/Twitter.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 42px;
height: 27px;
}


.Twitter a:hover {
background-position-y: 27px;

}

.Facebook a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/Facebook.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 18px;
height: 31px;
 }

 .Facebook a:hover {
background-position-y: 31px;
 }


 .Youtube a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/YouTube.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 29px;
height: 30px;
 }

 .Youtube a:hover {
background-position-y: 30px;
 }

 .Linkdin a {
background-image: url(http://www.nerissagrigsby.com/wp- content/themes/twentytwelve/img/LinkedIn.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 28px;
height: 29px;
}

.Linkdin a:hover {
background-position-y: 29px;    
}

#Social ul li {
display: inline-block;
margin-right: 24px; 
}

#Social ul {
margin: 12px 0 0 0;
padding: 0;
}

How can I remove this padding?

Answer 1

Get rid of top: 82px;

 #footer {
 background-image:url(img/FooterBG.png);
 height: 92px;
 position: relative;
 z-index: 10;    
 padding: 0 35px;
 left: 0px;
 /* top: 82px; */
 }