Background image repeated downwards

I'm unable to figure it out that why my last background image is repeated downwards. I have checked HTML thoroughly, and there is no repetition of lists.

Here is my HTML for this css:

 .contact-info a {
   display: block;
   min-height: 20px;
   background-repeat: no-repeat;
   background-size: 20px 20px;
   margin: 0 0 10px;
   padding: 0 0 0 30px;
 }
 .contact-info li.phone a {
   background-image: url('phone.png')
 }
 .contact-info li.mail a {
   background-image: url('mail.png')
 }
 .contact-info li.twitter a {
   background-image: url('../twitter.png')
 }

<section>
  <h3>Contact Details</h3>
  <ul class="contact-info">
    <li class="phone">
      <a href="tel:555-555-555">555-555-555</a>
    </li>
    <li class="mail">
      <a href="mailto:keytocheema@gmail.com">Keytocheema@gmail.com
    </li>
    <li class="twitter">
        <a href="#">My twitter</a>
    </li>
</section>