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 trialAdrian Jewell
3,038 PointsMy margin value for the ".social-icons" isn't executing like in the video..
It's not a huge issue but it's bugging me that it's not working the same and I can't figure out why. When writing the rule for ".social icon", Nick's icons reduce in size and are further spaced apart, mine however reduce in size only there is no spacing between the two icons and as far as I can see my code is exactly the same. I was able to achieve the spacing by adding a padding property underneath with a value of 5px, but I just can't figure out why my code isn't responding the same as in the video...
Victor Learned
6,976 PointsIt's really hard to say what the issue is without looking at your code. Could you please post your CSS and HTML?
Look at the Markdown Cheatsheet link on how to post your code.
Example for html:
```html
<p>This is code!</p>
```
5 Answers
Daniel Maia
6,228 PointsHi Adrian,
I agree with Victor, its hard to track down where the cause of the issue lays without looking at the code. However did you add padding-bottom: or did you use padding:
You should be able to copy and paste the code into the text field and should format it to readable code as shown with Victors code.
If you still having problems please let me know
Adrian Jewell
3,038 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Adrian Jewell | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,800italic,700,700italic,400italic' 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" id ="logo">
<h1>Adrian Jewell</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li> <li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li> <li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li> <li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://www.twitter.com/adrianr77084357"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/adrian.jewell.73"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Adrian Jewell</p>
</footer>
</div>
</body>
</html>
Adrian Jewell
3,038 Pointsbody {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;/* note percentage */
}
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:'Open Sans', sans-serif;
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: 700;
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; /* text color */
}
#gallery li a p {
margin: 5%;
padding: 0;
font-size: 0.75em;
color: #bdc3c7;
}
/**************************************************
PAGE: ABOUT
***************************************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/**************************************************
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');
}
/**************************************************
COLORS
***************************************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile devices */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Adrian Jewell
3,038 PointsAwesome! thanks for the tip victor, and Daniel in response to your question I just added padding: 0 5px. and it did what it's supposed to, but the margin value is unresponsive no matter what I change the value to, it doesn't seem to respond. I deleting the padding property in the end anyway and left the two social icons close together for now. appreciate your help guys.
Adrian Jewell
3,038 PointsSo I learned that I am an idiot lol. I was missing a semi colon after the height value before the margin. how I missed that is beyond be, thanks for your input anyway guys.
Adrian Jewell
3,038 PointsAdrian Jewell
3,038 PointsNot sure how to post my code on here as well without it getting completely re-formatted.