Hey guys my icons overlap on my paragraphs. I'm making it responsive.

Question

This is my main.css

/***************************** GENERAL ******************************/

body { font-family: 'Open Sans', sans-sarif; }

wrapper {

max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}

a {
text-decoration: none;

}

img { max-width: 100%; }

h3 {
    margin: 0 0 1em 0;
}

/***************************** HEADING ******************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

    text-align: center;
    margin: 0;
}

h1 { font-family: 'Changa One', sans-sarif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/***************************** NAVIGATION ******************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/***************************** FOOTER ******************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/***************************** PAGE PORTFOLIO ******************************/

gallery {

margin: 0;
padding: 0;
list-style: none;

}

gallery li {

float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;

}

gallery li a p {

margin: 0;
padding: 5%;
font-size: 0.75em;
color: #00ff00;

}

/***************************** PAGE:ABOUT ******************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 20%; }

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

ul { list-style: none; padding: 0; margin: 0; }

/***************************** COLORS ******************************/

/* sitebody */ body { background-color: #fff; color: #999; }

/* green header */
header {
    background: #0066cc;
    border-color: #00ccff;
}

/* nav background on mobile */
nav {
    background: #00ccff;
}


/* logo text */
h1, h2 {
    color: #fff;
}

/* links */
a {
    color: #6ab47b
}

/* nav links */
nav a, nav a:visited {
    color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
    color: #32673f;
}

This is my 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) {

}

This is my contact.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Isaiah Thornton | Expert Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html 3" id="logo"> <h1>Isaiah Thornton</h1> <h2>Developer</h2> </a> <nav> <ul> <li><a href="index.html 3" >Portfolio</a></li> <li><a href="About.html 3" >About</a></li> <li><a href="Contact.html 3" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>I am currently looking for new design work can always be contacted at my email address Zeek2292@gmail.com</p> <p>Please only use phone for serious inquiries. In all other cases Twitter, Facebook and Email are all excellent ways to contact me.</p> </section> <section id="secondary"> <h3>Contact details</h3> <ul class="contact-info"> <li class="phone"><a href="Tel:267-251-8400">267-251-8400</a></li> <li class="mail"><a href="Mailto:Zeek2292@gmail.com">Zeek2292@gmail.com</a></li> <li class="twitter"><a href="http//Twitter.com/intent/tweet?screen_name=Zeekthefirst">@Zeekthefirst</a></li> </ul> </section> <footer> <a href="http://Twitter.com/Zeekthefirst"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a> <a href="http://Facebook.com/Isaiah Thornton"><img src="img/facebook-wrap.png" alt="facebook Logo"class="social-icon"></a> <a href="http://zeeksdosanddonts.wordpress.com"><img src="img/Wordpress Logo.png" alt="Wordpress Logo"class="social-icon"></a> <p>© 2015 Isaiah Thornton.</p> </footer> </div> </body> </html>

Any help is much appreciated. Thanks a lot!!

Answer 1 · 2015-06-11T07:13:22Z

June 11, 2015 7:13am

Hey Isaiah!

It looks like you forgot to add a ** ; ** after width:40% in your responsive.css

Before

#secondary {
    width: 40%
    float: right;
}

After

#secondary {
    width: 40%;
    float: right;
}

The semi-colon ( this => ; ) is pretty much like a full stop to a sentence. If no full stop, the 2 sentences will join together.

Hope this helps!

Mike.

Welcome to the Treehouse Community

Looking to learn something new?

Isaiah Thornton