CSS styling is not affecting my list items. I cannot get the bullets to go away or the icons to show up. Help!

I've read through the questions that other people have had regarding this but I cannot fix my problem. My code appears right to me, and I've tried clearing my browser and cache but nothing has happened.

here is my html:

<section> <h3>Contact Details</h3> <ul class="contact-info"></ul> <li class="phone"><a href="tel:800-715-9870">800-715-9870</a></li> <li class="mail"><a href="mailto:cori@exmaple.com">cori@exapmle.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=SewLaMode">@SewLaMode</a></li> </section> <footer>

and my css:

/************************* 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 30px; }

.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'); }

thanks