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

Posted by Alex perez
Alex perez
1,667 Points

Need to give a max-width of 150px

On the exercise it is saying that i need to add a max-width of 150 px and i am putting that but it is coming out wrong i dont know if there is a bug on the exercise or if i am formatting 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="picture" class="profile-photo">
        <p>I like baseball and I love to code</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 
img{
   max-width: 100%;
  display: block;
  margin:center;
  margin: 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;
}
Lukasz Sadorski
Lukasz Sadorski
5,999 Points
Lukasz Sadorski
Lukasz Sadorski
5,999 Points 
img {
  max-width: 100%;
  display: block;
  margin: auto;
  margin-bottom: 30px;
  max-width: 150px;
  border-radius: 100%;
}

Dont forget about spacing after your "img{" & "margin:" & margin has to be set as "auto" instead of center.

Steven Parker
Steven Parker
230,995 Points
Steven Parker
Steven Parker
230,995 Points

Lukasz Sadorski — The spacing isn't important in CSS.

But you're right about the margin .. it looks like the challenge didn't check that one thoroughly! You might want to submit a bug report about it to Support.

1 Answer

Steven Parker
Steven Parker
230,995 Points
Steven Parker
Steven Parker
230,995 Points

Always add new CSS to the end of the file.

Because of the "cascade" of CSS, when rules have equal specificity whichever one occurs last will take precedence.

In this case, since there is already a rule in the file that targets the same element later in the file, any setting for max-width placed at the top of the file will be ignored.