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

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Extra margin on About Page

After modifying the h1 and h2 in my header, I get about 20px of extra white space on the top of my header on my About page. The Portfolio page and Contact page are not affected by this. How can I remove this top margin on my About page header?

8 Answers

Kurt Lopez
PLUS
Kurt Lopez
Courses Plus Student 4,455 Points

I have it too! i was forced to add a class on my about.html header just to give it -20px on the top margin..

Brandon Mathis
Brandon Mathis
11,141 Points

Bojana, yes. I noticed the 20px on my top margin on my "About" page after I added the responsive css. All other pages seem normal. I too have the normalize.css file in place so I don't quite understand exactly what the reset.css file is or what it's supposed to do. I thought the normalize.css file served that purpose.

Bill Hinostroza
Bill Hinostroza
19,273 Points

Can you paste in your code. It will allow us to see what's going on with the code.

Here is my responsive.css code. I'm pretty sure that the top margin drops down on my About.html page since I added the media queries. I can't figure out why it's doing this. Any suggestions? Thanks!

@media screen and (min-width: 480px) {

  /* *************************************
  TWO COLUMN LAYOUT
  ************************************* */

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }


 /* *************************************
  PAGE: PORTFOLIO PAGE
  ************************************* */

  #gallery li {
    width: 28.3333%;
} 

  #gallery li:nth-child(4n) {
    clear: left;
  }

  /* *************************************
  PAGE: ABOUT PAGE
  ************************************* */

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }



}


@media screen and (min-width: 660px) {

    /* *************************************
    HEADER
    ************************************* */

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
   }


 #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }


  h1 {
    font-size: 2.5em;
  }


  h2 {
    font-size: 0.825em;
   margin-bottom: 20px; 
  }

  header {
    border-bottom: 5px;
    border-style: solid;
    color: #009999;
    margin-bottom: 60px;
  }
}
Bill Hinostroza
Bill Hinostroza
19,273 Points

It looks like you don't have a reset css. Try downloading a normalize.css but if you don't want to you can simply remove the extra white space with the following css code

*{
margin: 0px;
padding: 0px;
}

This should do the trick if not try downloading a reset css.

Bill, is the reset css different from the normalize css? I already have the normalize css in my workspace that Nick Petit recommended we use, but I don't have the reset css. I have this margin drop issue only after I added my responsive css so I think it has something to do with the rules in that css.

Bill Hinostroza
Bill Hinostroza
19,273 Points

Oh, than you're fine if you already have the normalize css. Then yeah the problem seems to be in that css. Just experiment with each css tag/selector and see which is causing the problem.

Brandon Mathis
Brandon Mathis
11,141 Points

I'm having the exact same issue.

Brandon, do you have a margin drop of about 20px on your top margin of your About page? I'm curious because now I noticed the same thing happening to my Contact page too, when I minimize the screen size to under 400px. I can't be sure, but I think this problem started when I added my responsive css. When did you notice your top margin drop?

what is the use of normalize.cc now?