Header not spanning the entire page

I’m sure there is some kind of easy fix to this and I’m just running around in circles, but I cant figure out why the header containing my navigation just abruptly stops. is there anyway to get this to reach to span the entire top of the page? Ive tried width: 100vh on both the header and the body, but that didn’t work. For some reason when I set the width on the header to 100% it seems to shift the logo so far to the right it isn’t even visible anymore. I’ve been working at this same issue for a couple hours, I search, I whined, and I just guess at this point I’m hoping someone here can point me in the right direction. Thank you in advance!

*https://codepen.io/lapinenoire0103/pen/KKvvKEm

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:78.0) Gecko/20100101 Firefox/78.0

Challenge: Build a Product Landing Page

Link to the challenge:

Maybe you want to try vw instead, but let me take a look at the project

you are using wrong syntax
your all code should inside your body tag
example :

<head>
     // your code 
</head>
<body>
    <header>
        //your header 
   </header>
   <div>
       // your other code 
    </div>
</body>

I fixed the syntax and tried using vw instead of vh. The issue still exists! Is it a possible problem with my browser or something?

for me i don’t use main or header tag , i mostly use div tag to separate my different section

so you try this put your all code inside your body and then use div
beause by default div has 100% width

example :

<div id="main">
        <div id="header">
           // my header code 
       </div>
      <div>
           // my other code 
     </div>
</div>

so here by defalut my header have 100% width

From what I’ve read, the sake of accessibility, it’s important to structure your html using the semantic tags designed for that purpose. Div has no semantic meaning and therefore is unhelpful to anyone using alternative ways of accessing the page.