.nav_container {
  display: flex;
  width: 100%;
  height: 100dvh; /* For this to work as expected you need to give the container full height of the available space */
  flex-direction: row;
  border:1px solid red;
}

.buttons {
  height: 40px;
  width: 100%;
  margin: auto;
}

.buttons ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

.buttons li {
  padding-top: 10px;
}

<div class="nav_container">
  <div class="buttons">
    <ul>
      <li>
        <a href="#button"><img src="https://placehold.co/40x40?text=1"></a>
      </li>
      <li>
        <a href="#button2"><img src="https://placehold.co/40x40?text=2"></a>
      </li>
      <li>
        <a href "#button3"><img src="https://placehold.co/40x40?text=3"></a>
      </li>
      <li>
        <a href="#button4"><img src="https://placehold.co/40x40?text=4"></a>
      </li>
      <li>
        <a href="#button5"><img src="https://placehold.co/40x40?text=5"></a>
      </li>
      <li>
        <a href="#button6"><img src="https://placehold.co/40x40?text=6"></a>
      </li>
      <li>
        <a href="#button7"><img src="https://placehold.co/40x40?text=7"></a>
      </li>
      <li>
        <a href="#button8"><img src="https://placehold.co/40x40?text=8"></a>
      </li>
    </ul>
  </div>
</div>