display: flex

display: flex pada parent membuat anak-anaknya berbaris. Ini poin penting: kamu mengatur flex di container, bukan di item. Secara default arah barisnya horizontal (row), dan anak-anak menyusut/melebar sesuai ruang. Anak-anaknya tidak perlu diberi properti apa pun untuk mulai berbaris, jadi memasang display: flex di item justru tidak menghasilkan efek yang kamu harapkan.

/* HTML:
<div class="menu">
  <span>Satu</span>
  <span>Dua</span>
</div> */

.menu {
  display: flex;   /* di PARENT, bukan di anak */
  gap: 20px;
}