CSS/HTML - space at top cannot figure it out

HTML-CSS
1

Tell us what’s happening:
I cannot get the spacing on the top to not show. If you scroll my project, the pink disappears until it hits the space at the top and then reappears. Here is the link to my codepen https://codepen.io/KeenCode/pen/bGdgEYO . Any help would be greatly appreciated.

P.S. Try not to laugh at my code for too long :wink:

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0.

Challenge: Build a Product Landing Page

Link to the challenge:

2

Not sure if this is what you are talking about. But try removing the default margin on the body.

body {
  margin: 0;
}

Or if you want to keep the default left/right:

body {
  margin: 0 initial;
}
3

Is this the area you’re talking about?

codePen
codePen1323×377 16.7 KB

If that’s what you’re trying to make pink, then what’s causing it to be white is the margin here

.nonHeader{
  margin-top:300px;
  background-color:pink;
}

Try removing the margin and setting your page background-color from white to pink

#page {
  background-color: pink;
}
4

Thanks Lasjorg for the suggestion. My CSS did not contain a body definition. What is the default margin. Your first idea worked, but your second idea left me with my existing issue. I will use your first idea and solve my issue. Just still getting my head wrapped around this layout stuff. I often put borders with colors around my divs and whatnot just to see where all is fitting and not fitting correctly. Thanks.

image
image1036×60 9.04 KB
is the area that was not supposed to show up. I made it pink for my own visual, but really the video showing as well (left arrow in image) – behaving silly like an amateur (that’s me) did it.

So the solution was
body{ margin:0;}

Did the trick. Thanks a bunch.