Как прижать элемент вправо

Короткий ответ

Во flex-строке margin-left: auto забирает всё свободное место слева от элемента и прижимает его вправо:

<nav style="display: flex; gap: 12px; padding: 8px; background: whitesmoke;">
  <a href="https://example.com">Home</a>
  <a href="https://example.com">Blog</a>
  <a href="https://example.com" style="margin-left: auto;">Log in</a>
</nav>

Всё, что стоит после такого элемента, тоже уезжает вправо — удобно для шапки с логотипом слева и кнопками справа.

Все элементы вправо

justify-content: flex-end сдвигает вправо всю группу:

<div style="display: flex; justify-content: flex-end; gap: 8px;">
  <button>Cancel</button><button>Save</button>
</div>

Блок без flexbox

Блоку с заданной шириной хватит margin-left: auto, а текст и строчные элементы выравнивает text-align: right:

<div style="width: 160px; margin-left: auto; padding: 8px; background: lavender;">Block on the right</div>
<p style="text-align: right;">Text on the right</p>

Частая ошибка

float: right для этого больше не нужен: он вынимает элемент из потока, соседний текст начинает его обтекать, а родитель может «схлопнуться». Для кнопок и меню берите flexbox.