JSFiddle - React, Tailwind, and code Playground

HTML

<header id='header-img'>
  <div class='logo1'>
    <img id='logo'
       src='https://www.clipartkey.com/mpngs/m/61-614698_transparent-headphones-clipart-png-gaming-headset-silhouette.png'/>
  </div>

  <nav id='nav-bar'>
    
    <ul>  
      <li> <a href='' class='nav-link'> Features </a> </li> 
      <li> <a href='' class='nav-link'> Colours </a> </li> 
      <li> <a href='' class='nav-link'> Pricing </a> </li>
    </ul>
       
       </nav>
  
</header>
  
  <main>
  <section id='features'>
    
    
    
  
    </section>
    </main>

CSS

/* global element styling */
html{
  font-size= 10px;
}

body{
  background-color: #F7F7F7;
  font-family: system-ui;
}

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

header{
  position: fixed;
  min-height: 75px;
  padding: 0px 20px;
  background-color: #212529;
  width: 100%;
  height: 90px;
  display: flex; /* if i remove this line and line below the nav links space out but arent aligned*/
  align-items: center;
}

li{
  list-style: none;
}

nav> ul{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;

}

a{
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  color: #b51b20;
}

 img{
  width: 65px;
  height: auto;
  padding-top: 5px;
  display: flex;
  border-radius: 20px;

}

#nav-bar{
  width: 100%;
}