Moving social media images to the right in the header

I am hoping someone can help me figure out why my social media buttons are on the left margin of my site versus the right?

Site=www.bluezelia.com

the header code is:

<div id="page" class="hfeed">

<div id="social"><a href="https://www.pinterest.com/kathyiggers">
<img src="https://www.bluezelia.com/wp-content/uploads/2013/01/pinterest.png" width="40px"></a>
<a href="https://www.facebook.com/yourfacebookpage">
<img src="https://www.yourdomain.com/wp-content/uploads/your-uploaded-fb-logo.png" width="40px"></a>
<a href="https://twitter.com/yourtwittername">
<img src="https://www.yourdomain.com/wp-content/uploads/your-uploaded-twitter-logo.png" width="40px"></a>
<a href="https://yourrssfeedURL">
<img src="https://www.yourdomain.com/wp-content/uploads/your-uploaded-rssfeed-logo.png" width="40px"></a>
<a href="mailto:[email protected]">
<img src="https://www.yourdomain.com/wp-content/uploads/your-uploaded-mail-logo.png" width="40px"></a>
</div>
	<header id="branding" role="banner">
			<hgroup>
               	<?php

[Please post code or markup snippets between backticks or use the code button. As it stands, your posted code hase been permanently damaged by the forum’s parser.]

the CSS code is:

#social_icon img {

float:right;
height:32px;
width:32px;
margin:0;
margin-right:10px;

}

#social_icon {

float: right;
padding-top:50px;
width:250px;
z-index:-9999;
padding-bottom:10px;

}

Any help is much appreciated ??