Check out my website at
At the bottom of the page, you'll find a social media list that seems to be displaying oddly. It looks cluttered and like something is overlapping it. I can't seem to figure out what I'm doing wrong.
Here's the CSS I'm using:
ul.social-media{
margin-left:20px;
padding-top:30px;
}
ul.social-media li{
float:left;
padding-left:5px;
}
ul.social-media li.twitter{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
}
ul.social-media li.instagram{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-26px;
width:25px;
height:26px;
}
ul.social-media li.facebook{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-52px;
width:25px;
height:26px;
}
And here's the HTML:
<ul class="social-media">
<li class="twitter"><a href="#"> </a></li>
<li class="instagram"><a href="#"> </a></li>
<li class="facebook"><a href="#"> </a></li>
</ul>
I would greatly appreciate any help or suggestions to fix this issue. Thank you!