Images being cut off. Not showing properly.

Hi,

after following the video and code step by step for the contact images, they are being cut off and not sowing properly. How do I fix this?

Here is my html code:

<div id="wrapper"> <section> <h3>General Information</h3> <p>I am not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me.</p> <p>Please only use phone contact for urgent inqueries. Otherwise, Twitter and email are the best way to reach me.</p> </section> <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-6425">555-6425</a></li> <li class="mail"><a href="mailto:geraldine@yahoo.com">geraldine@yahoo.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li> </ul> </section>

Here is my CSS code:

/**************************** Page: Contact *****************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size:: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png');

}

.contact-info li.twitter a { background-image: url('../img/twitter.png');

}