Icons in Side Widget will not Display Horizontally

I would like to use social media icons directly in the text/html area of the side widget. I’ve successfully displayed them; however, they are by default displaying vertically. The code in the text of the side widget is

<div id="social-icons">
<a href="https://www.facebook.com/misscupcakeable">
<img src="https://cupcakeable.com/wp-content/uploads/2013/02/TealFacebook.png"
 height="50" width="50"
 title="Join My Facebook Page" alt="Join My Facebook Page" /></a>

<a href="https://www.twitter.com/misscupcakeable"><img
 src="https://cupcakeable.com/wp-content/uploads/2013/02/TealTwitter.png"
 height="50" width="50"
 title="Follow Me on Twitter" alt="Follow Me on Twitter" /></a>

<a href="https://www.pinterest.com/misscupcakeable"><img
 src="https://cupcakeable.com/wp-content/uploads/2013/02/TealPinterest.png"
 height="50" width="50"
 title="Follow Me on Pinterest" alt="Follow Me on Pinterest" /></a>
</div>

The code added to the custom css file via Jetpack is

.custom #social-icons a img { float:left; }

Why is this approach not working?

https://www.ads-software.com/extend/plugins/jetpack/