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

Question

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

Answer 1

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>