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 Amanda Baldwin
Amanda Baldwin
2,983 Points

How to set the margin to center.

I am also having trouble with setting the Margin to center in this problem. Please help. Thanks!

about.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Amanda Baldwin | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id= "logo">
        <h1>Amanda Baldwin</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="Photogragh of Amanda Baldwin" class="profile-photo" style="display:block;">
        <p> Hi, I am Amanda Baldwin! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy running, playing games, drinking good coffee, and more.</p>
        <p>If you'd like to message me on Email, my email is <a href="https://mail.google.com/mail/u/0/#inbox?compose=new"> amanda.baldwin0527@gmail.com </a></p>
      <h3>About</h3>
      </section>
      <footer>
        <a href="https://mail.google.com/mail/u/0/#inbox?compose=new"><img src="img/Email-logo.png" alt="Email logo" class="social-icon"></a>
      </footer>
   </div>
  </body>
</html>
css/main.css 
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;
}
Unsubscribed User
Unsubscribed User
4,513 Points

I would get a little bit more comfortable with using percents this way you are able to scale to the screen, try selecting the body and using something like this below.

body{ margin:0 auto; }

or body{ margin:10% 10%; }

depending on what you want just increase the percent or consider using bootstrap

  • Good luck.

3 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hey Amanda,

I don't see any changes in your CSS, so I'm not sure what you tried for Task 3 and Task 4. I have included the correct code for the CSS that is required for those two tasks (with comments). Please review and see if it makes sense. The tag that needs to have rules added is the <img> located about half way down in the CSS file.

img {
  max-width: 100%;
  display: block; /* This is added in Task 3 */
  margin: 0 auto 30px; /* This is added for Task 4 -- 0 top margin, auto for left/right(centers) 30px for bottom */
}

Let me know if this clears it up for you. :)

Amanda Baldwin
Amanda Baldwin
2,983 Points

Yes that did work, thank you Jason! :)

Lee Mosler
Lee Mosler
6,055 Points
Lee Mosler
Lee Mosler
6,055 Points

Amanda,

Instead of using inline styles in your code, you need to change this in the CSS file attached to the challenge. Jason's code does work but since you are still learning I would actually write out each step needed.

img {
  max-width: 100%;
  display: block; /* this is what it is asking for in step 3 , you applied it in the html as an inline style*/
  margin: 0 auto; /* this centers the img */
  margin-bottom: 30px; /* this is to understand where it's being applied until you feel comfortable with shorthand */
}
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Good catch Lee. I didn't scroll right/left and failed to notice the inline styling in the HTML file.

But, the video prior to this challenge does teach the shorthand CSS needed to center the image with some bottom margin (the video and challenge are exact in that aspect.). That's why I used the shorthand code.

Lee Mosler
Lee Mosler
6,055 Points
Lee Mosler
Lee Mosler
6,055 Points

It's been so long since I had seen that video I didn't pick up on that. Thanks for the clarification! It's always best to type as little as possible since you will be typing a lot and the DRY (Don't Repeat Yourself) method is always the best approach.

Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

No worries.

It's also good to see the various ways of doing things... good for learning. :)