Rollover links/images are stacking instead of lining up

Hello all - hoping someone can help. I'm editing this site for a client - totally under construction. I was adding rollover social media buttons at the bottom - should be easy enough, right - and I can't figure out why they are stacking on top of one another rather than sitting next to each other. There's plenty of horizontal room in the div so I'm stuck.

site link: http://jennilynn.net/IMT/satmath.html
this is an example of how my code looks for each icon:

HTML:

<div id="footerright2"> <a id="facebook" href="#" title="facebook"><span>facebook</span></a>
<a id="twitter" href="#" title="twitter"><span>twitter</span></a>
<a id="youtube" href="#" title="youtube"><span>youtube</span></a>
<a id="linkedin" href="#" title="linkedin"><span>linkedin</span></a>
</div><!--close #footerleft-->

Code (markup):

CSS: (each is the same, just replace twitter, linkedin and youtube where 'facebook' is)
Code:

#facebook {
display: block;
width: 32px;
height: 32px;
background: url("images/facebook.png") no-repeat 0 0;
}
#facebook:hover {
background-position: 0 -32px;
}
#facebook span {
position: absolute;
top: -999em;
}

Code (markup):

Any help would be greatly appreciated! Thanks!

- Jenni

 

I figured it out right after I posted - sorry. I'm new here and haven't figured out how to delete a post?