Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Adding Pages to a Website Add a New Page

Rex Orioko
Rex Orioko
3,234 Points
Posted by Rex Orioko
Rex Orioko
3,234 Points

Add space between social icons

cant seem to sucessfully add space between my social icons:

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

}

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

Any help?

Jonathan Dewitt
Jonathan Dewitt
8,101 Points
Jonathan Dewitt
Jonathan Dewitt
8,101 Points

Add a margin .social-icon

.social-icon { width: 20px; height: 20px; margin: 0 15px 5px 0; }
.social-icon:last-child { margin-right: 0; }

4 Answers

Rex Orioko
Rex Orioko
3,234 Points
Rex Orioko
Rex Orioko
3,234 Points

Still not working

Michael Lambert
Michael Lambert
6,286 Points
Michael Lambert
Michael Lambert
6,286 Points

can you show all the css and also the footer in your html

Rex Orioko
Rex Orioko
3,234 Points
Rex Orioko
Rex Orioko
3,234 Points

What does the last-child syntax do?

Jonathan Dewitt
Jonathan Dewitt
8,101 Points
Jonathan Dewitt
Jonathan Dewitt
8,101 Points

The margin would be applied to all social icons but not the final one.

Liam English
Liam English
3,837 Points
Liam English
Liam English
3,837 Points

Your code looks correct, however without seeing your HTML file, I can only assume that maybe the class name in your index.html file perhaps has a typo?

i.e :

<a href="#"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="socail-icon"></a>
<a href="#"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="socail-icon"></a>

Instead of :

<footer>
        <a href="#"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="#"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; Footer Text 2017</p>
</footer>

If so, your CSS file will obviously be looking for a different (non-existent) class, and will not be applying the correct styles to it.

/************************************
Footer
************************************/

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

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