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 trialIsabelle Bamber
Courses Plus Student 2,294 PointsHeader has moved down on the Contact page
Hi, I have created the new contact page and all the info is fine but the header bar has moved down - help! thanks
4 Answers
rydavim
18,814 PointsGiven that you're seeing the problem on the contact page, it's probably being caused by the margins on your h3 element. If that's the case, the following CSS rule should fix it.
h3 {
margin: 0 0 1em 0;
}
Isabelle Bamber
Courses Plus Student 2,294 PointsThanks everyone for your help :) Its fixed, it was in fact the h3 element on the contact page!
Jonathan Grieve
Treehouse Moderator 91,253 PointsGreat, I'm glad you got it sorted. :)
Have a look at the Google Chrome Developer tools if you're not familiar with them already. This is fantastic for seeing what your elements are doing (padding, margin etc)
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi there Isabelle.
It sounds like a common problem where the margins of your header are pushing things down. Do you see a gap between the header and the content in your browser screen.
Usually you can get rid of those with a simple reset style like this.
* {
padding: 0;
margin: 0;
}
Have you heard of the Box Model yet? The Box model refers to how elements on your page interactyt with each other. Each element has parts of it that take up space. These parts are known as Content Padding Border Margin
Put the width and height of all these together and they add up to the total amount of space the element takes.
Hope this helps. :)
Dustin Matlock
33,856 PointsHi Isabelle, did you link to the CSS file, and is the HTML file in the same folder as the index file? We can take a look for you if you post your code.
Wenfeng Ren
8,697 PointsWenfeng Ren
8,697 PointsSame issue, but fixed by adding h3 rule. Thx :)
Jacob Patrick
776 PointsJacob Patrick
776 PointsIs there a reason that its only happening on the contact page? I used the same h3 element in the about page, but it didn't bump the header down like on the contact page.