How can make a space between logo and nav bar?

Issue

I want to make header like on the photo:

Now it looks like that: header

Here is the html code:

<header class="header">
        
        <div class="container">
        <nav class="navBar">
            
            <div class="navBar-wrapper">
            <div class="img-logo">
            <img src="./img/logo.jpg" alt="" srcset=""></div>
            
            
            <div class="home">Home</div>
            <div class="aboutUs">About us</div>
            <div class="findSpace">Find space</div>
            <div class="share-space">Share space</div>
            <div class="promoteSpace">Promote space</div>

            </div>
        
        </nav>
        </div>
    
    </header>

And here is css:
Is there any way to add space between logo and move the navigation to the left?

body{
    font-family:"Poppins",sans-serif;
    font-weight: 400;
}

.container{
   
    max-width: 1110px;
    margin-left: auto;
    margin-right: auto;
}

.header{
    height: 112px;
    width: 100%;
    background: #fff;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navBar-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navBar-wrapper div{
    font-size: 16px;
    line-height: 24px;
    color: #323232;
    margin-top: 28px;
}

.home{
    font-weight: 700 !important;
    color:#F78434 !important;
}

How can I make a space between logo and nav?

Tried to access second child using nth-child(2), but that didn't work.

Code snippet: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html

Solution

You can do that by simply applying margin-right: auto; to the img-logo-container.

Note that this will affect the parent containers justify-content: space-between;, so I would suggest applying another CSS-property such as gap: 10px; to navBar-wrapper.

Alternatively, you could wrap all the links in the navbar inside another container for better control in your navbar.

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

.img-logo img {
  max-width: 100px;
}

.img-logo {
  margin-right: auto;
}

.container {
  max-width: 1110px;
  margin-left: auto;
  margin-right: auto;
}

.header {
  height: 112px;
  width: 100%;
  background: #fff;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.navBar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.navBar-wrapper div {
  font-size: 16px;
  line-height: 24px;
  color: #323232;
  margin-top: 28px;
}

.home {
  font-weight: 700 !important;
  color: #F78434 !important;
}

<header class="header">

  <div class="container">
    <nav class="navBar">

      <div class="navBar-wrapper">
        <div class="img-logo">
          <img src="https://4m4you.com/wp-content/uploads/2020/06/logo-placeholder.png" alt="" srcset=""></div>


        <div class="home">Home</div>
        <div class="aboutUs">About us</div>
        <div class="findSpace">Find space</div>
        <div class="share-space">Share space</div>
        <div class="promoteSpace">Promote space</div>

      </div>

    </nav>
  </div>

</header>

Answered By - Sigurd Mazanti