Как выровнять горизонтальное меню?

Question

[Hirexxx]

Есть меню, нужно расположить его в точности по макету. Какие свойства использовать для позиционирования? Margin? По левой и правой стороне не помогает, когда один-два блока становятся ровно, остальные едут. Шрифт, font-weight, font-family и font-size взяты из макета. Скриншот и код прилагаю.

<ul class="nav">
                    <li><a href="#">Lifestyle</a></li>
                    <li><a href="#">Photodiary</a></li>
                    <li><a href="#">Music</a></li>
                    <li><a href="#">Travel</a></li>

.nav
{
    display: flex;
    justify-content: center;
    align-items: center;

nav > li 
{
    text-decoration: none;
    list-style-type: none;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;

Answer 1

[TtT RrR]

1. Можно задать .nav justify-content: space-between и по ширине регулировать список
   
2. Если сам список расположен слева/справа, то можно дать для li { margin-right/-left: нужное значение; }
   

   li:not(:last-child){ // margin будет работать для всех li, кроме последнего, тем самым убирая лишний отступ
   margin-right:20px; 
   }