The problem here is that the elements have a height of 0 pixels. This is also the reason why they are visible once you add text to them.

You can set the height of a normal line of text for the elements like this:

    header {
        background-color: green;
        width: 100%;
        height: 1em;
    }

Of course you can also set an absolute height using px or vh.

See a Codepen with multiple examples: https://codepen.io/konlanx/pen/LYwjxNN

You can also use your browsers developer tools by right-clicking your page and choosing "Inspect element". In this view you can highlight an element and investigate its properties in the "Layout" tab. Here you can see that your elements are being rendered, but have a height of 0 pixels.