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
Bojana Skarich
3,260 PointsExtra 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
Courses Plus Student 4,455 PointsI 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
11,141 PointsBojana, 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
19,273 PointsCan you paste in your code. It will allow us to see what's going on with the code.
Bojana Skarich
3,260 PointsHere 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
19,273 PointsIt 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.
Bojana Skarich
3,260 PointsBill, 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
19,273 PointsOh, 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
11,141 PointsI'm having the exact same issue.
Bojana Skarich
3,260 PointsBrandon, 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?
Karthik Narayan
1,540 Pointswhat is the use of normalize.cc now?