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 Styling Web Pages and Navigation Build Navigation with Unordered Lists

Posted by Hovhannes Mkoyan
Hovhannes Mkoyan
737 Points

Problem with margin

I set margin: 0 0 30px 0; but there is no effect, there is stil interval between top,left and right of header and browser window, what is the problem?

Falk Schwiefert
Falk Schwiefert
8,706 Points

Could you post your complete code? The space might come from a different source.

Simple troubleshooting steps: Preview the website, right click the element and click inspect. This opens the developer tools. On the right side you should see a list of css (styles section). Scroll to the bottom of this and you see a square with different colors (margin is orange). Hover over this orange section and you see where exactly margin is applied around the element. The same goes for padding (the green section).

Hovhannes Mkoyan
Hovhannes Mkoyan
737 Points

below is the link https://jsfiddle.net/HovhannesMkoyan/gn1ak0fo/

when I set margin: -10px 0px 30px 0px; the interval between top and browser window disappears, however I can't fix the other 2 sides.

1 Answer

Karen Friedman
Karen Friedman
688 Points
Karen Friedman
Karen Friedman
688 Points

Hi Hovhannes, I was able to solve this problem by removing the margin from the H1. I kept everything in the header the same, but the H1 section I changed the margin to be 0.

h1 {
    font-family: 'Poiret One', cursive;
    margin: 0;  /* previously: 15px 0; */
    font-size: 1.75em;
    font-weight: normal;
    line-height:.8em;
}
Karen Friedman
Karen Friedman
688 Points
Karen Friedman
Karen Friedman
688 Points

Sorry, I saw that this ruined the spacing between the H1 and H2. So here's my edited version, which adds a bottom margin of 15px and top padding of 15px.

h1 {
    font-family: 'Poiret One', cursive;
    margin: 0 0 15px;
    padding-top: 15px;
    font-size: 1.75em;
    font-weight: normal;
    line-height:.8em;
}