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 trialHovhannes Mkoyan
737 PointsProblem 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?
Hovhannes Mkoyan
737 Pointsbelow 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
688 PointsHi 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
688 PointsSorry, 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;
}
Falk Schwiefert
8,706 PointsFalk Schwiefert
8,706 PointsCould 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).