Please Help me with Aligning the Site Content with the NavBar

I hope that you all are having a beautiful day.

I am trying to design a portfolio website using HTML/CSS and JS. I am done with the animations, switching to a navigation bar, and the website’s general design. When I wanted to add some content to my website as text, I saw that the div with the website content expanded to the top of the webpage and went through the navbar.

How I want it to behave is that the div will always start aligned centered and below the navbar itself. I know I have to do something with the relative positioning, but I am unsure how. At the same time, my div should expand down as much as needed so that I can scroll through the website. While trying to fix this, the div became scrollable rather than covering the whole page and making it scrollable.

I hope that someone can help me with this. Thank you so much.

Best wishes.

This is my current code:
https://codepen.io/dderingezgin/pen/LEPBNLj?editors=1000

This might be the specific problematic part

.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;
        }

I tried to make the div scrollable –> It ‘literally’ made the div scrollable not expand it.
I tried to make the div go behind the nav-bar –> it literally went behind it, but not completely scrollable.