Product Landing Page CSS - image in header issue

[b4c1c]

As I work on my landing page, I have an issue to put the logo in the centre of the page, above #nav-bar. I managed to have img smaller with #header-img property and aligned text with #nav-bar
but I could not have an image in the header centred.
I have it before bc I copied some css, but I did not understand how and why it is done so I deleted it and started over.
Any tips or should start over with html and change everything completely?

<header id="header" >
       <img id="header-img" src="https://design-style-guide.freecodecamp.org/downloads/fcc_secondary_large.png" >
       <nav id="nav-bar"  >
         <ul> <!-- here were 3 <li></li> elements -->
           <a  class="nav-link" href="#about" >About</a>
           <a  class="nav-link" href="#products" >Products</a>
           <a  class="nav-link" href="#contact" >Contact</a>
         </ul>
         </nav>
     </header>

CSS

#header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #BCD4E6;
  font-family: monospace, sans-serif;
  padding: 10px;
}

#header-img {
  height: 20px;
  
}

#nav-bar {
  text-align: center;
}

[okibe007]

Heres an easy way to center image

img {
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

images are displayed inline which means there occupy the whole width hence display block changes that and allows you to set the width, margin auto implies distribute the remaining space evenly between the sides.

[b4c1c]

yes, that helped. I removed the width cause that stretched the image, but from your tip I moved on and managed to go where I want with the project.
Thank you!