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

Jimmy Names
Jimmy Names
10,371 Points
Posted by Jimmy Names
Jimmy Names
10,371 Points

Bummer! issue

Tasked with setting maximum width to 150px and radius to 100%..

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

Keep getting issue with max-width.. can't see issue here could someone help???

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="f" class="profile-photo" />
        <p>me</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 
.profile-picture {
 max-width: 150px; 
}

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


a {
  text-decoration: none;
}

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

#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;
}
Jimmy Names
Jimmy Names
10,371 Points
Jimmy Names
Jimmy Names
10,371 Points

edit: added the class selector to see fi that would help but didn't//.

4 Answers

bothxp
bothxp
16,510 Points

Hi Jimmy,

Your answer of:

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

would work and will pass the task.

What's catching you out is the cascading nature of Cascading Style Sheets. If you look further down your main.css file you'll spot that there was already a

img {
  max-width: 100%;
}

rule in the file. So you are setting max-width: 150px; in the rule that you created but then later on that is getting superseded by the already existing max-width: 100% rule.

So you could of added your answers to the tasks to the pre-existing img rule or you just need to remove it.

But ...... I think the best way to approach the answer is to use something like...

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

Hope that helps.

Jimmy Names
Jimmy Names
10,371 Points
Jimmy Names
Jimmy Names
10,371 Points

Yeh it does, thanks man!

Curtis Murley
Curtis Murley
2,766 Points
Curtis Murley
Curtis Murley
2,766 Points

I usually don't add an answer until I can actually catch the problem you're running into. This is my answer and worked just fine

.profile-photo {
  display: block; 
  margin: relative;
  margin-bottom: 30px;
  max-width: 150px;
  border-radius: 100%;
}
Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

You are very close on this one, in the margin selector, you need to create a margin-bottom selector, as of now it is not registering the style because you have the value after the word auto which ends the statement. 

margin: 0 auto; 
margin-bottom: 30px;

change it to this and you should be good to go.

Jacob Mishkin
Jacob Mishkin
23,118 Points

I stand corrected, The code provided passed the challenge as well, I do apologize for misleading you. Bothxp is correct.

Jimmy Names
Jimmy Names
10,371 Points
Jimmy Names
Jimmy Names
10,371 Points

cheers guys, so why couldn't I write my margin selector on one line? seems so stupid of treehouse..

Jacob Mishkin
Jacob Mishkin
23,118 Points

It's because what you wrote is invalid syntax. When using a keyword such as auto, it ends the value statement due to using the first value give and applied to all sides of the HTML selector. Margin 0 auto, centers a div horizontally, What you wrote minus the auto is margin top and bottom of 0px and left and right margin of 30px. if you want to set each margin side you can write it like so:

margin:  15px 25px 15px 25px;

I hope this helps.