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