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

Michelle Grier
Michelle Grier
1,610 Points
Posted by Michelle Grier
Michelle Grier
1,610 Points

My About page looks funny, there is a white margin at the top. My other two pages don't have this problem.

My about page almost looks too low, like it starts lower on the page than the other two. I'm not sure why this is. Can someone help me?

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

#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;
}
Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I've looked at this question a couple of times in hopes that someone had answered. But given that noone has, and I don't see anything blatantly incorrect here, I think it might be a good idea if you post us a snapshot of your workspace. If you open your workspace you should see in the upper right-hand corner a camera looking icon. Make a snapshot and link it here so we can see how your other pages differ from this particular one.

Kevin Goudswaard
Kevin Goudswaard
11,061 Points
Kevin Goudswaard
Kevin Goudswaard
11,061 Points

might I ask, which browser you are using?

Michelle Grier
Michelle Grier
1,610 Points
Michelle Grier
Michelle Grier
1,610 Points

I've found that if I shrink the screen, the problem goes away for the about page, but appears in the contact page. Does this sound like an issue with responsive.css then?

3 Answers

David Hautamaki
David Hautamaki
15,517 Points
David Hautamaki
David Hautamaki
15,517 Points

In your CSS file, try setting the margin and padding to 0 for the body element. There might be some default settings "pushing" your page layout lower.

body { margin: 0; padding: 0; }

Michelle Grier
Michelle Grier
1,610 Points
Michelle Grier
Michelle Grier
1,610 Points

Hmm... I tried this, it didn't solve the problem, unfortunately...

Mark Pryce
Mark Pryce
8,804 Points
Mark Pryce
Mark Pryce
8,804 Points

I originally had a similar issue, and answered this for another member.

If my memory serves me right I do believe a margin has been set on a header tag by default. ( in my case it was a h3)

Though I can't remember where exactly I do recommend using Google dev tools to find which one it is, that's how I solved mine and it's always handy for things like this :)

Sorry I could not be more help hope it helps though.

Happy coding.

Michelle Grier
Michelle Grier
1,610 Points
Michelle Grier
Michelle Grier
1,610 Points

Thanks for all the help! I am just on to the trouble shooting part of the course, which I think uses the google dev tools that Mark Pryce is talking about, so I'll get through that first, then try some of these things and report back.

Also, I tried to take a screen shot but couldn't get it to post...

Thanks