Align Text to Down

I stated my problem in the title. I want to put the container(ID is about) div below the image. I tried many methods, but now my brain is burned :D I think it's related to position. I would be very happy if you help. Thanks in advance. (Note: I will make the design responsive near completion. You'll get the best results if you work on a 1920x1080 screen.)

My Code:

window.addEventListener("scroll", function(){
    var header = document.querySelector("nav");
    header.classList.toggle("sticky",window.scrollY > 0);
})

.fs-xl {
    font-size: 3rem;
}

.about{
    position: absolute;
}

.loginbutton {
    border: transparent;
    background-color: transparent;
    display: block !important;
}

.gotham-ultra {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    transform: translate(-50%, 85%) !important;
}

.mainpageanimate {
    animation: mpa 1s ease-in-out forwards;
    animation-delay: 1s;
    opacity: 0;
}

.navbar {
    transition: 0.25 ease;
}

.sticky {
    background-color: #f8f9fa !important;
}


.sticky .container-fluid .collapse ul li a {
    color: #212529 !important;
}

.sticky .container-fluid .collapse ul li .loginbutton {
    display: none !important;
}

@keyframes mpa {
    0% {
        transform: translateY(70px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }

}

<!DOCTYPE html>
<html>

<head>
    <title>Yottalogy - Ana Sayfa</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="img/icon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="http://fonts.cdnfonts.com/css/montserrat">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body class="bg-dark">

    <nav id="header" class="navbar navbar-dark navbar-expand-lg fixed-top">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" ria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor01">
                <ul class="navbar-nav me-auto mx-auto my-1">
                    <li class="nav-item mx-3">
                        <a class="nav-link text-light" aria-current="page" href="#">Ana Sayfa</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link text-light" href="#">Dersler</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link text-light" href="#">Blog</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link text-light" href="#">Forum</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link text-light" href="#">Destek</a>
                    </li>
                </ul>
                <ul class="navbar-nav position-absolute end-0 me-5">
                    <li class="nav-item mx-3">
                        <button type="button" class="nav-link text-light loginbutton">Giriş Yap</button>
                    </li>
                    <li class="nav-item">
                        <button type="button" class="btn btn-success">Hesap Aç</button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <img src="https://cdn.statusqueen.com/desktopwallpaper/thumbnail/city-Hd_4k_desktop_wallpaper_photos-512.jpg" class="img-fluid opacity-50 position-absolute">

    <div class="position-relative mainpageanimate">
        <p class="fs-xl text-light text-center position-absolute top-50 start-50 gotham-ultra">BİLGİNİN
            EFENDİSİ OLMAK İÇİN ÇALIŞMANIN UŞAĞI OLMAK GEREKİR.</p>
    </div>

    <div id="about" class="container about">
        <div class="row">
            <div class="col-4">
                <img src="" alt="">
            </div>
            <div class="col-8">
                <h1 class="text-light">Lorem Ipsum</h1>
                <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet nisi nec lorem dictum
                    pellentesque. Integer semper risus tortor, in ornare nisi interdum nec. Cras sit amet orci eros.
                    Pellentesque pulvinar suscipit turpis, nec sodales turpis tincidunt quis. Integer a ipsum a ligula
                    pharetra maximus sed placerat lectus. Curabitur euismod a est vitae malesuada. Phasellus elementum
                    eleifend risus, non porttitor sapien dictum mattis.</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
    </script>

</body>

</html>

Solution

There is a lot of position absolute elements in your page that doesn't seem to need it.

Put the image as background and remove the all absolute positioning styles.

You can use flex for centering elements instead.

Also if you want some section to be full height of screen, then use 100vh for that.

Do this and all the issues that burning your head will be gone.

Also if you're a beginner, then try creating some pages from scratch to get an idea how things work, rather that start with a template.