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

Posted by Yasin Atagün
Yasin Atagün
4,691 Points

CSS Box Model - Layout

Hello i want to make 0 gap between top of the screen and where the my header starts. I just dont understand why while im doing padding top 0 and margin 0 there is gap. And while im doing any value to padding-top its being 0 gap. Can someone explain me like im a dummie? I think i coudlnt get the main point of box model things.

.main-header {
  padding-top: 170px;
  height: 850px;
  background: #ffa949 url('../img/mountains.jpg') no-repeat center;
  background-size: cover;
  background-image: linear-gradient(#FFA949, firebrick);
}

Second question: what is the best technique for making a div which completely take full screen of any computer. For example, i got a one page website, and each section cover full screen with different background colors.

Darwin Smith
Darwin Smith
11,080 Points
Darwin Smith
Darwin Smith
11,080 Points

Hi!

I'm not sure what the rest of your code looks like, HTML or CSS, but you may over some HTML elements that are inside your main-header class which by default have margins (i.e. H1 tags). You could try debugging by using the Developer Tools and checking out what might be causing the unwanted space. Willing to help if you post more of your code.

1 Answer

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

If we start from the base, have you added browser reset rules? These are required to reset any browser specific padding, margins, spacing etc. Like Darwin said, we don't know much more without seeing the full code example.

Maybe throw it up on CodePen for a quick demo.