Bullet points still appearing on the contacts list, and icons will not appear at all in the list.

Bullet points are still appearing next to items in my contacts list, even though I set the list-style to none. In addition, none of the icons are appearing in the list. Why are my attempts to style the contacts list not working?

Here is the CSS: (for the Contact Page)

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

And here is the HTML:

<section> <h3>Contact Details</h3> <ul class="contact-info"></ul> <li class="phone"><a href="tel:301-549-8899">(301)549-8899</a></li> <li class="mail"><a href="mailto:dadeweaver@gmail.com">dadeweaver@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=ddeweaverphotos">@ddeweaverphotos</a></li>
</section>