How do I make an horizontal list-horizontal view-problem

Question

I do have a problem in showing my list horizontally.

Now this is my code:

body {
  background: orange;
}

.navigation {
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 40%;
  top: 60%;
  transform: translateY(-50%);
  z-index: 999;
}

.navigation li {
display:inline-block;
  width: 5px;
  height: 5px;
  margin: 30px;
  background: none;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  transition: transform 0.3s;
}

.navigation li:hover, .navigation li.selected {
  background: #FFFFFF;
  transform: scale(1.7);
 
}

<ul class="navigation">
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

The problem happens when I make the list horizontal display:inline-block; but I also noticed that changing the margin to 0px will not happen anymore, even if that is not the style I´m looking for. Some tips? I really need help I really n

Answer 1

I found out how to solve the problem: I changed the margin values to the displayed one. Now my bullet points are aligned ! Thank you all for the help!

.navigation li {
display:inline-block;
  width: 5px;
  height: 5px;
  margin: 0 30px 0; 
  background: none;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  transition: transform 0.3s;
}