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

HTML-CSS
1

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?

2

delete all of your CSS its wrong

3

great solution, any one serious that can help me?

4

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

5

what is wrong with it?

6

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 .

7

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.

8

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

9

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

10

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: