Согласование содержимого сайта с NavBar ⇐ CSS

[Anonymous]

Я пытаюсь создать веб-сайт-портфолио с использованием HTML/CSS и JS. Я закончил с анимацией, переключением на панель навигации и общим дизайном сайта. Когда я захотел добавить на свой веб-сайт некоторый контент в виде текста, я увидел, что элемент div с содержимым веб-сайта расширился до верхней части веб-страницы и прошел через панель навигации.
Как я этого хочу поведение заключается в том, что div всегда будет выравниваться по центру и под самой навигационной панелью. Я знаю, что мне нужно что-то сделать с относительным позиционированием, но не знаю, как это сделать. В то же время мой div должен расширяться настолько, насколько это необходимо, чтобы я мог прокручивать веб-сайт. При попытке это исправить, элемент div стал прокручиваемым, а не закрывал всю страницу и делал ее прокручиваемой.
Это мой текущий код:

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

https://codepen.io/dderingezgin/pen/LEPBNLj?editors=1000

Возможно, это конкретная проблемная часть

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

.sub-section {
display: none;
position: relative;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
background-color: transparent;
color: inherit;
padding: 2rem;
box-sizing: border-box;
text-align: center;
border: 1px solid currentColor;
opacity: 0;
}

.sub-section.active {
display: block;
animation: fade-in 0.8s ease forwards;
}

Я пытался сделать div прокручиваемым --> Это «буквально» сделало div прокручиваемым, а не расширяющим его.
Я пытался сделать так, чтобы div располагался за панелью навигации – -> оно буквально шло за ним, но не полностью прокручивалось.


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