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 trialRex Orioko
3,234 PointsAdd 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?
4 Answers
Rex Orioko
3,234 PointsStill not working
Michael Lambert
6,286 Pointscan you show all the css and also the footer in your html
Rex Orioko
3,234 PointsWhat does the last-child syntax do?
Jonathan Dewitt
8,101 PointsThe margin would be applied to all social icons but not the final one.
Liam English
3,837 PointsYour 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>© 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;
}
Jonathan Dewitt
8,101 PointsJonathan Dewitt
8,101 PointsAdd a margin .social-icon