Как выровнять элементы в HTML с помощью Flexbox ⇐ CSS

[Anonymous]

Я хочу, чтобы мои элементы были расположены в определенном порядке, чтобы заголовок (заголовок с абзацем об авторских правах) располагался по центру страницы. Мой раздел «О программе» не занимал половину моей страницы... Я пробовал использовать flex-basis, чтобы придать каждому элементу определенную ширину, но, похоже, это не сработало, есть идеи? Вот код для нижнего колонтитула, у меня есть эта проблема как для навигационной панели, так и для нижнего колонтитула, но я думаю, если он будет работать для одного, он будет работать и в целом.
Также PM: я не знаю, почему большая часть HTML-кода не отображается во фрагменте, вот изображение того, как он выглядит https://i.sstatic.net/VZepw.jpg
HTML-КОД:

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

.flex {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100%;
}

.container {
max-width: auto;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
align-self: start;

}

.bg-dark,
.btn-dark {
background-color: var(--dark-color);
color: #fff;
}
.footer .box a{

margin: 0 5px;
}
.lead {
font-size: 20px;
}
.py-1 {
padding: 1rem 0;
}

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

[*]




About
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis voluptatum vel praesentium molestias consectetur ea consequuntur a quidem vitae iste?

CarolandHousing
Copyright © 2021


[list]
[url=index.html]Home[/url]
[*][url=features.html]Features[/url]
[*][url=docs.html]Docs[/url]
[url=#][i][/i][/url]
[url=#][i][/i][/url]
[/list]

Рабочий Домо

Подробнее здесь: https://stackoverflow.com/questions/655 ... ng-flexbox