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 Make an About Page

Winter Trabex
Winter Trabex
2,071 Points
Posted by Winter Trabex
Winter Trabex
2,071 Points

I've done it right, but it won't let me advance.

It wants me to me use css to make an image have a max width of 150 pixels. I wrote the following code:

img {

max-width: 150px;

}

This should be right. At least, I think it is? But the website says I'm getting it wrong.

about.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/gratt.png" alt="A Picture of Howitzer Gratt." class="profile-photo">
        <p>This is me taking a test on teamtreehouse.com.
      </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-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

img {
  display: block; 
  margin: 0 0 30px 0;
  max-width: 150px;
  border-radius: 100%;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

1 Answer

luke hammer
luke hammer
25,513 Points
luke hammer
luke hammer
25,513 Points

Looks like you are blowing away your setting of 

img {
  display: block; 
  margin: 0 0 30px 0;
  max-width: 150px;
  border-radius: 100%;

with the setting of 

img {
  max-width: 100%;
Winter Trabex
Winter Trabex
2,071 Points
Winter Trabex
Winter Trabex
2,071 Points

There's another challenge later in the lesson that works just fine. My guess is the code is looking for the wrong answer.

Winter Trabex
Winter Trabex
2,071 Points
Winter Trabex
Winter Trabex
2,071 Points

Okay, thank you! I didn't know that it would keep what I had put in from previous exercises. I thought it generated a new page of code to work in each time. Lesson learned. :)