Yes, malmin’s suggestion is the first thing to sort out. But even once that is done, your page wouldn’t look like you want it to. Once you separate the h1 of the first section from the others, remove the
CSS property from the .header class. That property should be added when you want a div to hold its place on the screen even after scrolling. It alters the normal flow of HTML div’s on the page i.e. as block elements that fall one below the other. Now your bottom section should fall below your top section. But your top section would be shortened.
That’s because you’ve specified,
When you set the height/width in terms of %, the height is calculated in terms of the containing div and not the viewport height. If you insist on using % then what you need to do is give the container a height of its own so that the .header class can know what is the 100% that you’re mentioning. For that you need to start giving the height right from the top of the DOM chain. I would suggest you try to understand this concept, but for the time being I can offer you a hack. Well it’s not a hack, but it should help you skip the additional learning [for now, hopefully].
Instead of setting the height in terms of percentage. Set,
vh is a unit that’s great for this purpose. 1vh = 1% of the height of the viewport. So it’ll measure the screen size and set accordingly. Once you do this, your first section should take up 100% of your screen height and the remaining sections will fall one below the other, as they should.