Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Make an About Page

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
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
218,848 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
218,848 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.