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 Adding Pages to a Website Build the Contact Page

Isabelle Bamber
PLUS
Isabelle Bamber
Courses Plus Student 2,294 Points
Posted by Isabelle Bamber
Isabelle Bamber
Courses Plus Student 2,294 Points

Header 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
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Given 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;
}
Wenfeng Ren
Wenfeng Ren
8,697 Points
Wenfeng Ren
Wenfeng Ren
8,697 Points

Same issue, but fixed by adding h3 rule. Thx :)

Jacob Patrick
Jacob Patrick
776 Points
Jacob Patrick
Jacob Patrick
776 Points

Is 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.

Isabelle Bamber
PLUS
Isabelle Bamber
Courses Plus Student 2,294 Points
Isabelle Bamber
Isabelle Bamber
Courses Plus Student 2,294 Points

Thanks everyone for your help :) Its fixed, it was in fact the h3 element on the contact page!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Great, 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
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi 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
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Hi 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.