Как разместишь элементы равномерно по экрану

Для равномерного распределения элементов можно использовать Flexbox или CSS Grid.

Flexbox вариант:

.container {
  display: flex;
  justify-content: space-between; /* или space-around, space-evenly */
}

• space-between — элементы распределяются по краям, с равными промежутками между ними.
• space-around — элементы имеют равные отступы вокруг.
• space-evenly — элементы распределены с одинаковыми промежутками, включая края.

CSS Grid вариант:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Этот способ автоматически адаптирует количество колонок под ширину экрана.

Оба метода поддерживают адаптивность и легко настраиваются.