Как сделать горизонтальное меню (пункты в строку)?

Пункты идут столбиком, потому что <li> — блочные элементы. Самый удобный способ выстроить их в строку — flexbox на <ul>:

<nav>
  <ul class="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

.menu {
  display: flex;       /* пункты встают в ряд */
  gap: 24px;           /* расстояние между ними */
  list-style: none;    /* убрать маркеры-точки */
  margin: 0;
  padding: 0;          /* убрать дефолтный отступ списка */
}
.menu a {
  text-decoration: none;
  color: #333;
}

Что здесь важно:

• display: flex на <ul> ставит все <li> в строку;
• gap задаёт промежутки без возни с margin;
• list-style: none убирает маркеры, а padding: 0 — левый отступ, который браузер даёт спискам по умолчанию (иначе меню «съедет» вправо).

Чтобы прижать меню вправо или раскидать логотип и пункты по краям, используйте justify-content:

.menu { justify-content: flex-end; }      /* всё вправо */
/* или для «лого слева, меню справа» */
.header { display: flex; justify-content: space-between; align-items: center; }

Раньше для этого брали display: inline-block или float, но флекс проще и не оставляет щелей между пунктами.