Landing product with fixed header

Hello everyone I need your help about the fixed header of my landing product

 <header id="header">
                <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo">
                <nav id="nav-bar">
                    <ul>
                        <li><a href="#featured" class="nav-link">Features</a></li>
                        <li><a href="#video" class="nav-link">How it works</a></li>
                        <li><a href="#pricing" class="nav-link">Pricing</a></li>
                    </ul>
                </nav>
            </header>

CSS

header{
                padding: 1.5rem 3rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: fixed;  /*however it is not working */
            }
            nav#nav-bar ul{
                display: flex; 
            }
            nav#nav-bar ul li{
                margin-left: 2rem;
            }
            nav#nav-bar ul li a{
               color: #111; 
            }

            #header-img{
                width: 15rem;
                margin-left: -1rem;
            }

It would be helpful to be able to see your full code, or Codepen, if you have one so we can test it. But I think the problem might be that you haven’t specified WHERE your header should be fixed. If an element has a position: fixed, or position: absolute, you have to specify where it will be positioned using top, right, bottom, and left.

got it thanks, your explanation was helpful

media query hello please help me I want my technical documentation work on small devices like phone,

<nav id="navbar">
              <header>
                <h2>Java Documentation</h2>
              </header>
              <ul>
                <li><a class="nav-link" href="#introduction">Introduction</a></li>
                <li><a class="nav-link" href="#what_you_should_already_know">What you should already know</a></li>
                <li><a class="nav-link" href="#identifying_the_features_of_java">Identifying the Features of Java</a></li>
                <li><a class="nav-link" href="#java_architecture">Java Architecture</a></li>
                <li><a class="nav-link" href="#components">Components</a></li>
                <li><a class="nav-link" href="#hello_world">Hello world</a></li>
                <li><a class="nav-link" href="#variable">Variable</a></li>
                <li><a class="nav-link" href="#method">Methods</a></li>
                <li><a class="nav-link" href="#example">Example</a></li>
                <li><a class="nav-link"  href="#reference">Reference</a></li>
              </ul>
            </nav>

here is the media query

 .container {
                  min-height: 300px;
                  width: 100%;
                  background: LightGray;
                  display: grid;
                  grid-template-columns: auto 2fr;
                  grid-template-rows: auto 2fr auto;
                  grid-gap: 1px;
                  grid-template-areas:
                    "advert content"
                    "advert content"
                    "advert content";
                }

 @media (min-width: 400px){
                  .container{
                    grid-template-columns:auto 2fr;
                    grid-template-rows: auto 2fr auto;
                    grid-template-areas:
                    "advert content"
                    "advert content"
                    "advert content";
                  }
              }
              @media (min-width: 200px){ //this one not working help me to fix it
                .container{
                  grid-template-columns: auto 2fr;
                  grid-template-rows: auto 2fr auto;
                  grid-template-areas:
                  "advert advert"
                  "content content"
                  "content content";
                }
              }