Horizontal Rollover Images

I have a set of rollover images in my sidebar, but I cannot figure out how to horizontally align them.

site: http://test.9001sites.com

HTML:

<div class="socialmedia-buttons">
<a class="sidebar-facebook" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>"></a><a class="sidebar-twitter" href="http://www.twitter.com/runcoachjen"></a><a class="sidebar-rss" href="http://runtofinish.com/feed"></a><a class="sidebar-email" href="http://www.feedblitz.com/f/?Sub=678073"></a>
</div>

CSS:

/* Social Media Widget Icons */
.socialmedia-buttons {
    width: 180px ;
    margin: 10px auto 0 auto;
    align: center;
}
.socialmedia-buttons img {
	border: 0 !important;
	margin-right: 5px;
        margin-left: 5px;
}

/* SOCIAL MEDIA ICONS ROLLOVERS */
.socialmedia-buttons a.sidebar-facebook {
    display: block;
    background: url(http://runtofinish.com/images/facebook-a.png) no-repeat;
    height: 32px;
    width: 32px;
}
.socialmedia-buttons a:hover.sidebar-facebook{
    background-image: url(http://runtofinish.com/images/facebook.png);
}
.socialmedia-buttons a.sidebar-twitter {
    display: block;
    background: url(http://runtofinish.com/images/twitter-a.png) no-repeat;
    height: 32px;
    width: 32px;
}
.socialmedia-buttons a:hover.sidebar-twitter{
    background-image: url(http://runtofinish.com/images/twitter.png);
}
.socialmedia-buttons a.sidebar-rss{
    display: block;
    background: url(http://runtofinish.com/images/rss-a.png) no-repeat;
    height: 32px;
    width: 32px;
}
.socialmedia-buttons a:hover.sidebar-rss{
    background-image: url(http://runtofinish.com/images/rss.png);
}
.socialmedia-buttons a.sidebar-email{
    display: block;
    background: url(http://runtofinish.com/images/email-a.png) no-repeat;
    height: 32px;
    width: 32px;
}
.socialmedia-buttons a:hover.sidebar-email{
    background-image: url(http://runtofinish.com/images/email.png);
}