Как настроить выравнивание ссылок на панели навигации при большом просмотре в Bootstrap 5 ⇐ CSS

[Anonymous]

Последние пару лет я пытался время от времени изучать Bootstrap и хочу использовать его для обновления своего веб-сайта-портфолио. Я задал вопрос о панели навигации в маленьком представлении, который был близок к решению:
Как настроить выравнивание ссылок на панели навигации в маленьком представлении в Bootstrap 5Данный ответ заключался в том, чтобы использовать flex для настройки навигационной панели так, как я хотел, чтобы она выглядела в маленьком представлении, но создала еще одну проблему в большом представлении, которая, я думаю, связана с контейнером, в котором есть пустой SVG и портфолио. span:


Мне посоветовали добавить гибкость к моему дополнительному CSS в маленьком представлении:

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

.nav-item {
flex: 0 0 150px;
display: flex;
}

Я вроде понимаю совет. В дополнительном CSS в маленьком представлении:
.nav-item предотвращает сжатие и увеличение, установив для него значение 0 и установив для него конкретную ширину 150 пикселей.
Затем я посмотрел на контейнер с пустым SVG и портфолио:

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

[url=/]

Portfolio
[/url]

Нужно ли сжимать контейнер, чтобы ссылки отображались в одной строке?
Если да, то как это пишется? Нужно ли мне настроить класс контейнера и назвать его как-нибудь по-другому, а затем в дополнительном CSS в большом представлении изменить ширину на определенное количество пикселей? Вот полный HTML-код:

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

[url=/]

Portfolio
[/url]

[list]
[*][url=#]About[/url]
[*][url=#]PowerPoint[/url]
[*][url=#]Infographics[/url]
[*][url=#]Logos and Icons[/url]
[*][url=#]Web Design[/url]
[*][url=#]Blog[/url]
[/list]

Я попробовал изменить ширину .nav-pills в большом представлении в дополнительном CSS:

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

nav-pills {
width: 900px;
}

При этом все ссылки помещаются в одну строку, но расстояние между ссылками не одинаковое:


Спасибо,

Подробнее здесь: https://stackoverflow.com/questions/784 ... ootstrap-5