horizontal social menu issues

gistfile1.txt

/* HTML */ 

<ul id="social">
<li><a href="http://houzz.com/"><img src="http://test.jgdesignchicago.com/wp-content/uploads/2015/07/houzz_grey.png" alt="Houzz" width="40" height="40" onmouseover="this.src='http://test.jgdesignchicago.com/wp-content/uploads/2015/07/houzz_blue.png';"
      onmouseout="this.src='http://test.jgdesignchicago.com/wp-content/uploads/2015/07/houzz_grey.png';"></a></li>
<li><a href="http://pinterest.com/"><i class="fa fa-pinterest fa-2x"></i></a></li>
<li><a href="http://plus.google.com/"><i class="fa fa-google-plus fa-2x"></i> </a></li>
<li><a href="http://facebook.com/"><i class="fa fa-facebook fa-2x"></i></a></li>
<li><a href="http://twitter.com/"><i class="fa fa-twitter fa-2x"></i></a></li>
<li><a href="http://google.com/"><img src="http://test.jgdesignchicago.com/wp-content/uploads/2015/07/refinedhaystack_grey.jpg" alt="Refined Haystack" width="60" height="38"onmouseover="this.src='http://test.jgdesignchicago.com/wp-content/uploads/2015/07/refinedhaystack_blue.jpg';"
      onmouseout="this.src='http://test.jgdesignchicago.com/wp-content/uploads/2015/07/refinedhaystack_grey.jpg';"></a></li>
</ul>

/* CSS */ 

#social {

  height: 50px;

  width: 300px;

  float: right;

  margin-top: -70px;

  margin-right: 70px;
 text-align: justify;

}

#social li{

	width:50px;ere

	float:left;
 display: inline-block;
}