Position Fixed changes display!

HTML-CSS
#1

Hey there guys, whilst creating my product landing page, I encountered just one issue that is with my header(nav-bar).

My intended display looks like this without the position: fixed; property:

No position Property
No position Property1366×727 46.3 KB

Here’s my CSS file (please do not mind my long lines of code, I initially used Sass):

* {
  border: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #bacefa;
}

.container {
  max-width: 1100px;
  padding: 0 25px;
  margin: 0 auto;
  overflow: auto;
  font-family: "Roboto Slab", serif;
  font-size: 100%;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}

#header {
  color: #fff;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

#header nav {
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  overflow: auto;
  /* position: fixed; */
}

#header nav .logo {
  width: 250px;
}

#header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
}

#header nav li {
  padding: 15px;
}

#header nav li a:hover {
  color: red;
  padding-bottom: 7px;
  border-bottom: 2px solid black;
}

Here’s also a copy of my HTML file:

<div class="container">
 <header id="header">
  <!--|| Navigation Bar ||-->
  <nav id="nav-bar" class="nav-links">
  <div class="logo">
    <a href="#">
       <img
            title="Home"
             src="https://webneel.com/sites/default/files/images/manual/logo-fashion/fashion-logo%20(51).gif"
                alt="logo"
                id="header-img"
              />
            </a>
          </div>
          <ul>
            <li><a href="#header" class="nav-link"> Home</a></li>
            <li><a href="#products" class="nav-link"> Products</a></li>
            <li><a href="#about-us" class="nav-link"> About Us</a></li>
           <li><a href="#contact-us" class="nav-link"> Contact Us</a></li>
          </ul>
        </nav>
      </header>
    </div>

But when I uncomment the position: fixed; heres my output:

Position - fixed
Position - fixed1360×727 42.6 KB

So I tried some basic adjustments like adding margin, padding but it never gave the desired output.
This is the only challenge I have at the moment.

#2

Hi @teamie! When you change the postion to fixed the the element is positioned relative to the viewport. Here is the documentation from w3schools:

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

You may need to use the left property here to manually center the header.
Check out the changes I have made and let me know if it helps you. Cheers!

#3

Thanks a lot, @tsadarsh. I was able to get it done using the top and left properties to make it centered and it looks okay now. Really helpful.