Little Box between List Image

I've got a problem with my website. I added some Social Media Image Buttons in my Website and always those little boxes changing colors appear beside them. I don't know how to fix this.

Did you get any ideas?

Here's the image link: http://ift.tt/28UFDQu

The HTML snippet

    <div class="social">
        <ul>
            <li> <a href="#"> <img src="assets/Android.png" alt="Smiley face" height="42" width="42"> </a> </li>
            <li> <a href="#"> <img src="assets/GitHub.png" alt="Smiley face" height="42" width="42">  </a> </li>
            <li> <a href="#"> <img src="assets/GooglePlus.png" alt="Smiley face" height="42" width="42">  </a> </li>
            <li> <a href="#"> <img src="assets/LinkedIn.png" alt="Smiley face" height="42" width="42">  </a> </li>
            <li> <a href="#"> <img src="assets/Mail.png" alt="Smiley face" height="42" width="42">  </a> </li>
            <li> <a href="#"> <img src="assets/Reddit.png" alt="Smiley face" height="42" width="42">  </a> </li>
            <li> <a href="#"> <img src="assets/YouTube.png" alt="Smiley face" height="42" width="42">  </a> </li>
        </ul>

    </div>

The CSS snippet

.social{
float: right;
padding-top: 1.1rem;
}

.social ul{
list-style: none;
display: inline;
}

.social li{
padding-left: 10px;

display: inline;
}

At the end of the day, I don't even think it has something to do with that code. Maybe it's just a general error.