Product Landing Page- Header Taken out of Flow of Document

HTML-CSS
1

Hello,

I am doing the Product Landing page. When I try to position the header as fixed to the top of the page-wrapper, it takes it out of the flow of the document, and other elements are placed as if it does not exist.

HTML:

  <!-- if we position header fixed to this page wrapper, will it take it out of document flow? -->
  <header>
    <div class="logo-div">
      <img src="/Nike-logo.png" alt="nike-pic" srcset="">
    </div>

    <nav>

      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Pricing</a></li>
        <li><a href="">About</a></li>
      </ul>
    </nav>
  </header>

CSS:

#page-wrapper{
position: relative;
}

header{
position: fixed;
top: 0px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 20px;
min-height: 75px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.146 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-pagePreformatted text

2

A post was merged into an existing topic: Header taken out document flow

5

Please do not create duplicate topics for the same challenge/project question(s). This duplicate topic has been unlisted.

Thank you.