Как я могу центрировать все элементы на панелях навигации по горизонтали? ⇐ CSS

[Anonymous]

Я пытаюсь центрировать все навигационные ссылки в разделе заголовка по горизонтали. Я хочу, чтобы навигационные ссылки класса nav отображались в центре заголовка. Ниже приведен мой фрагмент HTML для раздела заголовка:

Код: Выделить всё

[img]{{ asset([/img]




[list]
[*][url={{ url(]Features[/url]
[*][url={{ url(]About[/url]
[*][url={{ url(]Contact[/url]
[/list]

Код: Выделить всё

            
[url={{ route(]Login[/url]
[url={{ route(]Register[/url]

Я пробовал использовать CSS с такими свойствами, как text-align: center, justify-content: center и display: flex, но навигационные ссылки по-прежнему появляются в правой части заголовка. Например:

Код: Выделить всё

body, html {
margin: 0;
padding: 0;
font-family: Montserrat, sans-serif;
height: 100%; /* Ensures full height of the page */
}

/* Background and General Layout */
body {
background-color: #ffffff;
color: #333;
display: flex;
flex-direction: column;
justify-content: space-between; /* Ensures footer is pushed to the bottom */
align-items: center;
padding: 20px;
height: 100%;
}

/* Header Styling */
.header {
background-color: rgb(146, 180, 210);
padding: 1rem 0;
width: 100%;
text-align: center;
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
/* display: flex;
justify-content: center; */
}

.nav li{
font-weight: bold;
}

Несмотря на мои попытки, навигационные ссылки остаются выровненными по правому краю из-за применения к контейнеру класса Justify-content-between.
Что Я хочу добиться:

• Логотип должен оставаться сверху или слева (в зависимости от макета) шапки.
• Все три навигационные ссылки («Особенности», «О программе», «Контакты») должны быть расположены горизонтально. по центру посередине заголовка.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ation-bars