Html Question posted in
Some basic documentation can be found here.

Html – How to fix the empty space between Logo and Navigation Menu?

This is the Live Demo of my header section, what can I do to fix the empty space between the logo and navigation menu?

I want both the image and .nav to come close towards each other, not one to lean towards the other so that the empty space outside both is the same.

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 100px;
}

ul {
  display: flex;
  list-style: none;
}

ul li {
  padding: 8px 12px;
}

.nav .logo {
  width: 120px;
}
<div class="nav">
  <img class="logo" src="https://santabanta.co.in/wp-content/uploads/2023/11/vbes-2-1.png" alt="">
  <ul>
    <li><a href="">Classes & Services</a></li>
    <li><a href="">Pricing</a></li>
    <li><a href="">Kids & Family</a></li>
    <li><a href="">Workshop</a></li>
    <li><a href="">Training</a></li>
  </ul>
</div>
Tags:

4

Answers


  1. 0

    Remove the justify-content from the nav:

    .nav {
   display: flex;
   align-items: center;
   /* justify-content: space-between; */
   margin: 10px 100px;
}
    Login or Signup to reply.
  2. 0

    As @abasahed pointed out

    .nav {
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
  margin: 10px 100px;
}

ul {
  display: flex;
  list-style: none;
}

ul li {
  padding: 8px 12px;
}

.nav .logo {
  width: 120px;
}
    <div class="nav">
  <img class="logo" src="https://santabanta.co.in/wp-content/uploads/2023/11/vbes-2-1.png" alt="">
  <ul>
    <li><a href="">Classes & Services</a></li>
    <li><a href="">Pricing</a></li>
    <li><a href="">Kids & Family</a></li>
    <li><a href="">Workshop</a></li>
    <li><a href="">Training</a></li>
  </ul>
</div>

    Here is the codepen link

    https://codepen.io/zsaleem/pen/QWowGVg

    Login or Signup to reply.
  3. 0

    To get the required result, the value of the margin property in the "nav" class CSS rule should be changed as follows:

    .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 10px;
}

    Thanks.

    Login or Signup to reply.
  4. 0

    just use justify-content : space-around; instead of justify-content : space-between;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search