[SOLVED] Logo on the left and menu links centered

Logo on the left and menu links centered

Hi. I'm struggling with writing the code for the navigation layout in the picture (above). I want the logo, which is a picture, to be on the left and the menu links in the center. How would that be written in CSS?

This is the HTML for that part:

    <header id="header">
        <div class="img">
            <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
        </div>
        
        <nav id="nav-bar">
            <ul id="menu">
                <li><a class="nav-link" href="#menu1">menu1</a></li>
                <li><a class="nav-link" href="#menu2">menu2</a></li>
                <li><a class="nav-link" href="#menu3">menu3</a></li>   
            </ul>
        </nav>
    </header>

Do I maybe need to make some changes in the HTML first?

Thanks in advance!

Solution

The main idea is to align everything in the center, but then, pull the logo out of the flow in order to place it to the left. Of course, you need to remember about media-query on a small screen.

Updated:

#header {
  display:flex; 
  justify-content: center; /* center everything */
  align-items: center;
  margin-top: 20px;
  padding: 0 260px; /* prevent crawling on the logo */
}

.img{
  position: absolute; /* remove the logo from the flow */
  left: 20px;   /* move the logo to left */
  height: 48px;
  width: 100px;
}

#nav-bar > ul {
  display:flex; /* make a horizontal menu */
  gap: 20px;    /* gap between menu items */
  list-style: none;
  padding-left: 0px;
}

.img, #nav-bar > ul > li {
  border: 1px solid gray;
  padding: 5px;
}

<header id="header">
    <div class="img">
        <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
    </div>

    <nav id="nav-bar">
        <ul id="menu">
            <li><a class="nav-link" href="#menu1">menu1</a></li>
            <li><a class="nav-link" href="#menu2">menu2</a></li>
            <li><a class="nav-link" href="#menu3">menu3</a></li>   
        </ul>
    </nav>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis, ducimus earum. Perferendis, neque quasi praesentium tempore at laudantium omnis modi sunt. Tenetur cum dolor magnam praesentium iusto illo, delectus doloribus?</p>

Previous:

#header {
  display:flex;
  justify-content: center;
}

.img{
  position: absolute;
  left: 0; 
}

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

   <header id="header">
        <div class="img">
            <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
        </div>
        
        <nav id="nav-bar">
            <ul id="menu">
                <li><a class="nav-link" href="#menu1">menu1</a></li>
                <li><a class="nav-link" href="#menu2">menu2</a></li>
                <li><a class="nav-link" href="#menu3">menu3</a></li>   
            </ul>
        </nav>
    </header>