I am trying to design a navbar where the "SushiMan" heading is aligned to the left and the other list items (Menu, Food, Services, etc.) are aligned to the right. The layout works fine when I follow a tutorial on YouTube, but it’s not working as expected on my local machine.
Here is my HTML and CSS code:
.header__nav { display: flex; justify-content: space-between; /* This will push the items to the edges */ align-items: center; /* Vertically aligns items */ padding: 0 20px; /* Adds space on the sides */ overflow: hidden;}.header__logo { flex: 1; display: flex; position: relative; padding: 20px;}.header__logo-overlay { position: absolute; inset: 0; width: 100%;}<header><nav class="header__nav"><div class="header__logo"><h4>SushiMan</h4><div class="header__logo-overlay"> </div><ul class="header__menu"><li><a href="#menu">Menu</a></li><li><a href="#menu">Food</a></li><li><a href="#menu">Services</a></li><li><a href="#menu">About Us</a></li><li></li><img src="./assets/search.svg" alt="search"/></ul><ul class="header__menu-mobile"><li><img src="./assets/menu.svg"/></li></ul></div></nav></header>