How can make a space between logo and nav bar?-CodePudding

I want to make header like on the photo: enter image description here

Now it looks like that: header

Here is the html code:

<header >
        
        <div >
        <nav >
            
            <div >
            <div >
            <img src="./img/logo.jpg" alt="" srcset=""></div>
            
            
            <div >Home</div>
            <div >About us</div>
            <div >Find space</div>
            <div >Share space</div>
            <div >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

CodePudding user response：

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 >

  <div >
    <nav >

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


        <div >Home</div>
        <div >About us</div>
        <div >Find space</div>
        <div >Share space</div>
        <div >Promote space</div>

      </div>

    </nav>
  </div>

</header>

CodePudding user response：

.img-logo{
margin-right:380px;
}