Why is my text being placed in the top left of the page?

here is my code : https://codepen.io/svumo/pen/GRRpxEJ

So as you can see in the picture, the text is being placed in my nav bar, I am unsure why this is happening, maybe it is the opacity that is affecting it?

I am unsure what to do and I would expect the text to be placed under the grey area, any one know how to fix this without having to do padding and margins?

delete all of your CSS its wrong

great solution, any one serious that can help me?

i am totally being serious im sorry you did not like my responce good luck

what is wrong with it?

compare it to any other css and observe the differences then do it correctly
https://codepen.io/tiroloquo/pen/YgXRXR here is a sample of my css, im rather new at all this but take a look and compafe it, then correct .

I am guessing you have never heard of a reset stylesheet, a lot of the css is not my code, the css at the top till it says /code starts here/ is my code, the code above it resets all the styling so it is basic.

Scroll down to see the actual problem.

look im trying to instal a centOS server in the cloud right now so if you know what the problem is just fix it .

Lol are you ok?
I don’t know the problem I am just explaining to you what a reset sheet is because you clearly don’t understand what it is

You have a fixed element with a class of headers. Depending on your use case this could be what you’re looking for. Heres a good example of different position elements are how they act: