Why element positioning is wrong?

[crystal sun]

Your CSS is not putting it in the middle. I did a copy and paste of your code and made only 2 small changes.

1. I changed the color of text inside the nav so that test text would be visible.
2. I added text to both the header and nav to show where they are.
   https://codepen.io/chooking/pen/qBvZjoM

That means, either you have some empty content in the header pushing it down or you have some CSS applied to the body that puts everying in the center and you did not show that CSS.

Or you have an additional container around the App div and it has styling to center its children.

I just noticed the min-height: 100vh on the header. It didn't show when I copied your code because you had className for React and that doesn't work in vanilla HTML/CSS.