Я не могу центрировать элементы LI

Question

Я не могу центрировать элементы LI в неупорядоченном списке. Я перепробовал все возможные решения, но это не сработало. Класс опций Nav - это просто контейнер для списка UL. Результаты прилагаются во вложении .

.header-start .top-nav .center .nav-options {
   width: 80%;
   height: 100%;
   margin: auto;
   background: red;
}

.header-start .top-nav .center .nav-options .items {
   display: flex;
   list-style: none;
   text-align: center;
   margin: auto;
}

.header-start .top-nav .center .nav-options .items li a {
   text-decoration: none;
   color: #fff;
   font-weight: 100;
   text-transform: uppercase;
   font-size: 13px;
}

Вот результаты приведенного выше кода

Answer 1

Попробуйте добавить эту строку в «.header-start .top-nav .center .nav-options .items»:

    width: fit-content;

Результат будет:

.header-start .top-nav .center .nav-options .items {
    width: fit-content;
    display: flex;
    list-style: none;
    text-align: center;
    margin: auto;
}

Answer 2

Можете ли вы попробовать:

.header-start .top-nav .center .nav-options .items {
   display: flex;
   list-style: none;
   justify-content: center;
   margin: auto;
}