Как растянуть меню на всю ширину css

Для того чтобы пункты меню заняли равномерное пространство во всю ширину блока, проще всего воспользоваться flexbox, и его свойством justify-content которое равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце.

Рассмотрим пример:

<ul>
  <li>Пункт меню 1</li>![![enter image description here](https://i.ibb.co/cbDkyKt/menu.png "enter image title here")](https://i.ibb.co/cbDkyKt/menu.png "enter image title here")
  <li>Пункт меню 2</li>
  <li>Пункт меню 3</li>
  <li>Пункт меню 4</li>
</ul>

ul {
  /* Добавим фоновый цвет для нашего меню */
  background: #33CCFF;
  /* Выставим высоту */
  height: 100px;
  /* Уберем точки у li элементов */
  list-style-type: none;
  /* добавим отступ, чтобы крайние значения меню не были прижаты в плотную к границам меню */
  padding: 10px;
  /* Используем flexbox */  
  display: flex;
  justify-content: space-between;
  /* Дополнительно сделаем вертикальное выравнивание */
  align-items: center;
}

Результат