Как сделать правильно расстояние между li?

.row{ 
  width:100%; 
  display:table; 
} 
 
.menu ul li { 
  list-style-type: none; 
  float: left; 
  margin: 0 10px; /*расстояние между пунктами по ширине*/ 
} 
 
.menu2 ul li { 
  list-style-type: none; 
  margin: 10px 0; /*расстояние между пунктами по высоте*/ 
}

<div class="menu"> 
  <ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">Product</a></li> 
    <li> 
      <a href=""><img src="images/hello.png" alt=""></a> 
    </li> 
    <li><a href="">Store</a></li> 
    <li><a href="">About</a></li> 
  </ul> 
</div> 
<div class="row"> 
<hr> 
</div> 
<div class="menu2"> 
  <ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">Product</a></li> 
    <li> 
      <a href=""><img src="images/hello.png" alt=""></a> 
    </li> 
    <li><a href="">Store</a></li> 
    <li><a href="">About</a></li> 
  </ul> 
</div>

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.menu ul { 
  display: flex; 
  justify-content: space-between;  /* or justify-content: space-around; */ 
  align-items: center; 
} 
 
.menu ul li { 
  list-style: none; 
}

<div class="menu"> 
  <ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">Product</a></li> 
    <li> 
      <a href=""><img src="http://via.placeholder.com/100x70?text=HELLO" alt=""></a> 
    </li> 
    <li><a href="">Store</a></li> 
    <li><a href="">About</a></li> 
  </ul> 
</div>

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
  box-sizing: border-box; 
} 
 
.menu { 
  display: table; 
  padding: 0 10px; 
} 
 
.menu ul { 
  display: table-row; 
} 
 
.menu ul li { 
  display: table-cell; 
  border-left: 10px solid transparent; 
} 
 
.menu ul li a { 
  display: table-cell; 
  height: 50px; 
  vertical-align: middle; 
} 
 
.menu1 { 
  padding: 0 10px; 
} 
 
.menu1 ul { 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
  height: 50px; 
} 
 
.menu1 ul li { 
  margin-left: 10px; 
} 
 
.clear, 
.clear:before, 
.clear:after { 
  content: ""; 
  display: block; 
  clear: both; 
} 
 
.menu2 { 
  padding: 0 10px; 
} 
 
.menu2 ul { 
  height: 50px; 
  line-height: 50px; 
} 
 
.menu2 ul li { 
  float: left; 
  margin-left: 10px; 
}

<div class="menu"> 
  <ul> 
    <li><a href="">home</a></li> 
    <li><a href="">profile</a></li> 
    <li><a href="">scills</a></li> 
    <li><a href="">portfolio</a></li> 
    <li><a href="">appirience</a></li> 
    <li><a href="">touch my</a></li> 
  </ul> 
</div> 
 
<div class="menu1"> 
  <ul> 
    <li><a href="">home</a></li> 
    <li><a href="">profile</a></li> 
    <li><a href="">scills</a></li> 
    <li><a href="">portfolio</a></li> 
    <li><a href="">appirience</a></li> 
    <li><a href="">touch my</a></li> 
  </ul> 
</div> 
 
<div class="menu2 clear"> 
  <ul> 
    <li><a href="">home</a></li> 
    <li><a href="">profile</a></li> 
    <li><a href="">scills</a></li> 
    <li><a href="">portfolio</a></li> 
    <li><a href="">appirience</a></li> 
    <li><a href="">touch my</a></li> 
  </ul> 
</div>