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

Aaron HARPT
Aaron HARPT
19,845 Points
Posted by Aaron HARPT
Aaron HARPT
19,845 Points

Code challenge problem

They keep telling me that the max-width property on the img property in my css is wrong. Any help would be appreciated.

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="profile photograph" class="profile-photo">
        <p>My name is Aaron.</p>
      </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;
}
img {
display: block;
  margin: auto;
  margin-bottom: 30px;
  max-width: 150px;
  border-radius: 100%;
}

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

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

3 Answers

Jessica Barnett
Jessica Barnett
8,028 Points
Jessica Barnett
Jessica Barnett
8,028 Points

You have 2 blocks of code selecting the img tag.

There's your block

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

And if you look further down, there's this block too

img {
  max-width: 100%;
}

So, your rule sets max-width to 150px, but then the 2nd rule sets the max-width again, to 100%.

Generally, styles that are towards the bottom of your stylesheet will override any rules at are higher up. That's what's meant by "cascading" style sheets. Check out this css-tricks post for more info.

There are a couple ways to fix it:

You could just move your block of code to the bottom of the stylesheet. That way, your code would override the other style. You could also remove the 2nd img rule entirely...

But what if there are other images on the page that DO need to be set to max-width: 100%? We only need to change the profile-image, not every image on the page.

So in this case, it's probably best to use the class selector instead of the img tag. That way all your images will still have their max-width: 100%, and you can still style your profile image as you like. 

.profile-image {
  display: block;
  margin: auto;
  margin-bottom: 30px;
  max-width: 150px;
  border-radius: 100%;
}

I hope that helps!

Kelly von Borstel
Kelly von Borstel
28,880 Points
Kelly von Borstel
Kelly von Borstel
28,880 Points

I can't find anything wrong with your code. But I'm posting what worked for me anyway. It's almost identical... The only difference I notice is that I left max-width at the top. But really, that shouldn't matter.

img {
  max-width: 150px;
  display: block;
  margin: auto;
  margin-bottom: 30px;
  border-radius: 100%;
}
Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Yeah, I can't see anything wrong either.

I used the following and it passed:

section img {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}
Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Oh, I see now...

You have img declared twice with the second one, about 1/2 way down, with a solo max-width set (no other properties). This value is also incorrect as for what was asked for. That's probably why.