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 Styling Web Pages and Navigation Polish the Navigation and Footer

Adrian Jewell
Adrian Jewell
3,038 Points

My 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...

Adrian Jewell
Adrian Jewell
3,038 Points

Not sure how to post my code on here as well without it getting completely re-formatted.

Victor Learned
Victor Learned
6,976 Points

It'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
Daniel Maia
6,228 Points

Hi 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
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>&copy; 2014 Adrian Jewell</p>
      </footer>
    </div>
  </body>
</html>
Adrian Jewell
Adrian Jewell
3,038 Points
body {
  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
Adrian Jewell
3,038 Points

Awesome! 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
Adrian Jewell
3,038 Points

So 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.