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 CSS Layout Basics Getting Started with CSS Layout Creating a Layout Wrapper

Hayden Bradfield
Hayden Bradfield
1,797 Points
Posted by Hayden Bradfield
Hayden Bradfield
1,797 Points

Why are there margins even though I set margin to 0?

I set the margins to zero, however, when I open to view on the browser, there are spaces between the header, sections, and footer. In addition, there are spaces above the header and on the sides. Do I have to set my margin values into the negatives (example being margin:-12) to get rid of them? What do I do?

David Schriever
David Schriever
1,777 Points
David Schriever
David Schriever
1,777 Points

Hey Hayden, could you fork your workspace or show your code?

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

As some commenters have noted, you could set everything to a margin of zero. However, I would avoid setting the margin for everything to zero unless you're prepared to manually set it on all of your elements. As David Schriever mentioned, I'd encourage you to post a link to your code so we can help you see exactly what's happening and give you insight into how you could address it in the future.

3 Answers

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I tell you why. Because, I guess, you set the margin, maybe to be in the body. The body margin, or html, removes only margins on that.

If you want everything to be seleted you select it with a start. 

* {
margin: 0;
}

Headers and such, have a dedfautl margin and or paddings.

Again, I can't see your code so I don't exactly know, but heres my shot.

Hayden Bradfield
Hayden Bradfield
1,797 Points
Hayden Bradfield
Hayden Bradfield
1,797 Points

Ok I believe I solved the issue earlier today. I had to set the body margin to 0.

But I have two other issues now.

  1. I aligned the navigation menu to the center, but it offsets to the right slightly
  2. I cannot get the right passing function to work on Chrome. Although, it works on Edge. I did set a text break so that the text continues on the following line instead of overflowing.
Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

: p but you know, we need your code :/ and maybe make a new threat for a new problem? maybe.

Andrew Goninon
Andrew Goninon
14,925 Points
Andrew Goninon
Andrew Goninon
14,925 Points

Using Chrome Developer tools you can highlight the margin at the top of the page. The gap is coming from the h1 element with class name and can be fixed with:

.name {
 margin-top: 0; 
}
Andrew Goninon
Andrew Goninon
14,925 Points

Just realised this issue is addressed in the next video!