Попутный ветер: Как добавить расстояние между элементами на этой панели навигации?

Я пытаюсь создать панель навигации ссылок для своего портфолио с помощью TailwindCSS, и у меня возникают проблемы с размещением каждой ссылки в ней.

<div class = "gap-x-8` flex pt-8">
  <div>
    <a class = "cursor-pointer" href = "#" target = "_blank">
      <ion-icon class = "p-10 text-4xl text-slate-300 hover:text-slate-700" name = "logo-linkedin"></ion-icon>
    </a>
  </div>
  <div>
    <a class = "cursor-pointer" href = "#" target = "_blank">
      <ion-icon class = "text-4xl text-slate-300 hover:text-slate-700" name = "logo-github"></ion-icon>
    </a>
  </div>
  <div>
    <a class = "cursor-pointer" href = "#" target = "_blank">
      <ion-icon class = "text-4xl text-slate-300 hover:text-slate-700" name = "mail"></ion-icon>
    </a>
  </div>
  <div>
    <a class = "cursor-pointer" href = "#" target = "_blank">
      <ion-icon class = "text-4xl text-slate-300 hover:text-slate-700" name = "logo-stackoverflow"></ion-icon>
    </a>
  </div>
  <div>
    <a class = "cursor-pointer" href = "#" target = "_blank">
      <ion-icon class = "text-4xl text-slate-300 hover:text-slate-700" name = "logo-instagram"></ion-icon>
    </a>
  </div>
</div>
<script type = "module" src = "https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src = "https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

В теге контейнера я пробовал использовать:

• "сетка-столбцы-5"
• «гибкий зазор»

В Tailwind.play это тоже не работает. Я уверен, что это связано с моим непониманием того, что такое тип элемента, но я действительно застрял.

Я ожидал увидеть, что каждый элемент будет располагаться шире по всей панели. У меня также возникли проблемы с тем, что некоторые свойства Tailwind не работают. Различные элементы будут принимать только определенное количество дополнений и ничего больше (pt-32/pt-8 и т. д.), поэтому я беспокоюсь, что это также может быть связано со структурой файла.