Input field to load in my browser?

my email input field can’t be displayed even if I code it well? what is my problem?
here is my code? https://codepen.io/solomon123fgt/pen/VwLWGYO?editors=1000

it seems it is behind the navbar… if I hid the nav bar it appears

also, the style element is in the wrong place, it should be inside BODY
consider the below structure when you create a pen in codepen, a lot of stuff is already added in background by codepen:

<!DOCTYPE html>
<html>
   <head>
      <!-- here your metadatas -->
      <!-- this stuff can be added in codepen in the pen settings -->
   </head>
   <body>
      <style>
         <!-- here your CSS rules -->
         <!-- this is the stuff that in codepen goes in CSS box -->
      </style>
      <!-- here your html elements -->
      <!-- this is the stuff that in codepen goes in the HTML box -->
   </body>
</html>

how to make the input field visible. without hiding. the nav. i correct my style i put it inside body tag Thank you, here is the code
https://codepen.io/solomon123fgt/pen/VwLWGYO?editors=1000

you haven’t changed anything for what I can see

you need to have the input element a bit more down
you can add padding to it so that it descends below the nav bar
you need to stick it in a form element anyway, you can add a padding to the form element
I don’t know if it is the best way to go tho

I am pants at this stuff, putting elements nicely near each other - I just know a bit about ho things work

it works by adding padding. Thank you