Contact Images not moving with Column layout

After building my responsive.css and breaking it out into two columns under Contact Details, my mail icon and twitter icon stay to the left they do not move with the secondary column. How do I get them to move? Have I missed something in the walk through?

My code for Responsive.css @media screen and (min-width: 480px) { /************************************* TWO COLUMN LAYOUT **************************************/ #primary { width: 50%; float: left;
} #secondary { width: 40% float: right;
}

} @media screen and (min-width: 660px) { }

My code for Main.css (Contact section only) /************************************* 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.mail a { background-image: url('../img/mail.png'); } .contact-info li.twitter a { background-image: url('../img/twitter.png'); }

My code for Contact.html (section for columns only) <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>Currently studying to become a designer of epic proportions.</p> <p>Please use twitter and email to contact me.</p> </section>

  <section id="secondary"> 
    <h3>Contact Details</h3>
    <ul class="contact-info"> 
      <li class="mail"><a href="mailto:nicholcd@gmail.com">nicholcd@gmail.com</a></li>
      <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=technicalnich">@technicalnich</a></li>
    </ul>
  </section>
  <footer>
    <a href="http://twitter.com/technicalnich"><img src="img/twitter-wrap.png" alt"Twitter Logo" class="social-icon"></a>
    <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt"Facebook Logo" class="social-icon"></a>
    <p>&copy; 2014 Chris Nicholson.</p>
  </footer>
</div>