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

CSS How to Make a Website Adding Pages to a Website Add Iconography

melissa brown
melissa brown
4,670 Points

Margins not changing

When I add a margin of 10px on the bottom of the a elements, I don't see an increased space between the lines.

Main css

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

body {
  font-family: 'open sans', sans-serif;
}

#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: 'Special Elite', 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: 800;
  padding: 14px 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 5%;
}


/* ************************************
PAGE PORFIOLIO
***************************************/ 

#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: #bdc3c7;
}

/* ************************************
PAGE ABOUT 
***************************************/ 
.profile-photo {
  display:block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

/* ************************************
CONTACT
***************************************/ 

.contact-info{
  list-style:none;
  margin: 0;
  padding: 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 0 20px;
}
.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}



/* ************************************
COLOURS
***************************************/ 

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

contact.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Melissa Brown | Designer </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
      <a href="index.html" id="logo">
             <h1>Melissa Brown</h1>
             <h2>Designer</h2>
        </a>
      <nav>
        <ul>
          <li><a href= "index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html"class="selected">Contact</a></li>
        </ul>
      </nav>
        </header>
    <div id="wrapper">
      <section>
        <h3>General Informatoin </h3>
        <p> I am currently looking new collaborations</p>
        <p> Please contact me via email </p>
      </section>
      <section>
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555 555">555-555</a></li>
          <li class="mail"><a href="mailto:mbrown_@hotmail.com">mbrown_85@hotmail.com</a></li>
        </ul>

      </section>
      <footer>
        <a href="http//twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
        <a href="http//facebook.com/nickpettit"><img src="img/facebook.png" alt="facebook logo" class="social-icon"></a>
        <p>&copy; 2014 Melissa Brown.</p>
      </footer>
      </div>
    </body>
</html>

thanks

Ken Alger
Ken Alger
Treehouse Teacher

Edited for mark-up

Melissa;

Welcome to Treehouse! To see how to post your code in the forums, please see the following post.

Happy coding,

Ken

4 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher

Melissa;

If it is for your .contact-info a links, you have a syntax error in your CSS.

You are missing a semi-colon after display: block on the line before.

You also need to remove the space between the # and the gallery li.

Ken

Ken Alger
Ken Alger
Treehouse Teacher

And... in under Nav Link you need to remove the space between nav a: and visited.

Ken

Richmond Lauman
Richmond Lauman
28,793 Points

I don't see any rules for 10px margin bottom of any a elements in your code, but your code is a little hard to read with the messed up formatting. what was the specific selector path for the a elements you intend to ahave a 10px bottom margin?

Richmond Lauman
Richmond Lauman
28,793 Points

I see you fixed the formatting. I will look again.

Richmond Lauman
Richmond Lauman
28,793 Points

Yeah I still don't see any a elements with 10px of margin bottom

Richmond Lauman
Richmond Lauman
28,793 Points

Good catch Ken. And if it is .contact-info a the margin: 0 0 0 20px; needs to be margin: 0 0 10px 20px; If Melissa wants a 10px margin bottom.

melissa brown
melissa brown
4,670 Points

thanks guys all fixed