HTML elements moving when I add frames and containers

I've searched around and I don't find nothing, for a title of context, in the past few days I have been building my portfolio, I am a backend dev so I am not used to any of these things.

I added a banner where there is my profile photo and I add a few informations in the side like school year, my LinkedIn, GitHub and email. But recently I added a few containers and elements to showcase my projects, and when I did it these elements went further up. Like showed in the image I want to put the text in the red box but I don't know how to, I also know that we aren't supposed to put photos, but I can't see a better way to explain my problem. I also tried to use top=; and flex box

These are my CSS and HTML structures:

.banner {
    width: 100%;
    height: 175px;
    background-color: #E6D5C7;
    position: relative;
    margin-top: 225px;
    margin-bottom: 10px;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-photo {
    width: 250px;
    height: 200px;
    border-radius: 20%;
    margin-top: -100px;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.credentials {
    width: 400px;
    padding: 10px;
    border-radius: 8px;
    position: absolute;
    top: 32.5%; /* Center vertically */
    left: 20%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust both axes to be perfectly centered */
    text-align: center; /* Ensures text inside is centered */
    gap: 8px; /* Adds spacing between elements */
}

.credentials p {
    font-size: 20px;
    margin: 12px 0;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}


.credentials p:hover {
    border-radius: 4px;
    background-color: #a8bdb3;
}

.credentials a {
    color: #333333;
    text-decoration: none;
}

.aboutme {  
    width: 500px;
    margin: 0;
    padding: 10px;
    border-radius: 8px;
    position: absolute;
    margin-top: 70px;
    right: 0;
    top: 187px;
    top: 27%; /* Adjust this value to position it vertically within the banner */
    transform: translateY(-50%);
}

.aboutme p {    /* #40514E */
    font-size: 20px;
    margin: 12px 0;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.aboutme p:hover {
    background-color: #a8bdb3;
}

.aboutme a {
    color: #333333;
}

<div class="banner">
        <!-- <img src="photos/GitHubprofile1.JPG" alt="Profile Photo" class="profile-photo">-->
    </div>
    <div class="credentials"> <!-- section of left side in the banner -->
        <p> 
            <i class="fa-brands fa-linkedin"></i>
            <a> Linkedin profile</a>
        </p>
        <p> 
            <a href="https://github.com/Gustavo-DCosta" target="_blank">
                <i class="fa-brands fa-github"></i> GitHub profile
            </a>
        </p>
        <p> 
            <i class="fa-solid fa-envelope-open-text"></i>
            <a href="mailto:[email protected]">[email protected]</a>
        </p>
    </div>
    <div class="aboutme"> <!-- section of right side in the banner -->
        <p>
            <i class="fa-solid fa-graduation-cap"></i>
            <a>1st Year Technology and Engineering, specializing in Sustainable Development (STI2D - French Technical High School Program)<br></a>
        </p>
        <p>
            <i class="fa-solid fa-user"></i>
            <a>I am 17 years old, 11th grade</a>
        </p>
    </div>

Solution

I think there are some misunderstandings in your code. Let me explain to you what should be improved.

HTML Containers

First, you closed your banner div directly after opening it:

<div class="banner">
        <!-- <img src="photos/GitHubprofile1.JPG" alt="Profile Photo" class="profile-photo">-->
    </div> <!-- This is the close tag --!>

Instead, you should close it after the aboutme div:

<div class="banner">
    <!-- <img src="photos/GitHubprofile1.JPG" alt="Profile Photo" class="profile-photo">-->
    <div class="credentials"> <!-- section of left side in the banner -->
        <p> 
            <i class="fa-brands fa-linkedin"></i>
            <a> Linkedin profile</a>
        </p>
        <p> 
            <a href="https://github.com/Gustavo-DCosta" target="_blank">
                <i class="fa-brands fa-github"></i> GitHub profile
            </a>
        </p>
        <p> 
            <i class="fa-solid fa-envelope-open-text"></i>
            <a href="mailto:[email protected]">[email protected]</a>
        </p>
    </div>
    <div class="aboutme"> <!-- section of right side in the banner -->
        <p>
            <i class="fa-solid fa-graduation-cap"></i>
            <a>1st Year Technology and Engineering, specializing in Sustainable Development (STI2D - French Technical High School Program)<br></a>
        </p>
        <p>
            <i class="fa-solid fa-user"></i>
            <a>I am 17 years old, 11th grade</a>
        </p>
    </div>
</div>

CSS Positioning

Absolute Positions

Don't use properties like top, bottom, left, right and position: absolute; if you want to locate something within another container. These properties are used to locate something independently to all other elements.

Flexbox

The display: flex; property already ensures, that the containers within the container are located with equal space. Therefore, you don't need to set transform or margin.

Z-Index

If you are using the z-index: -1; property, other elements such as the body overlap the div and make it unreachable for the cursor. Therefore, functions like hover or clicks have no effect.

Final CSS Code:

This css code is using only the necessary properties to locate the credentials and aboutme divs within the banner:

.banner {
    width: 100%;
    height: 175px;
    background-color: #E6D5C7;
    position: relative;
    margin-top: 225px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-photo {
    width: 250px;
    height: 200px;
    border-radius: 20%;
    margin-top: -100px;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.credentials {
    width: 500px;
    padding: 10px;
    border-radius: 8px;
    text-align: center; /* Ensures text inside is centered */
    gap: 8px; /* Adds spacing between elements */
}

.credentials p {
    font-size: 20px;
    margin: 12px 0;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}


.credentials p:hover {
    border-radius: 4px;
    background-color: #a8bdb3;
}

.credentials a {
    color: #333333;
    text-decoration: none;
}

.aboutme {  
    width: 500px;
    padding: 10px;
    border-radius: 8px;
    text-align:center;
}

.aboutme p {    /* #40514E */
    font-size: 20px;
    margin: 12px 0;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.aboutme p:hover {
    background-color: #a8bdb3;
}

.aboutme a {
    color: #333333;
}

<div class="banner">
    <!-- <img src="photos/GitHubprofile1.JPG" alt="Profile Photo" class="profile-photo">-->
    <div class="credentials"> <!-- section of left side in the banner -->
        <p> 
            <i class="fa-brands fa-linkedin"></i>
            <a> Linkedin profile</a>
        </p>
        <p> 
            <a href="https://github.com/Gustavo-DCosta" target="_blank">
                <i class="fa-brands fa-github"></i> GitHub profile
            </a>
        </p>
        <p> 
            <i class="fa-solid fa-envelope-open-text"></i>
            <a href="mailto:[email protected]">[email protected]</a>
        </p>
    </div>
    <div class="aboutme"> <!-- section of right side in the banner -->
        <p>
            <i class="fa-solid fa-graduation-cap"></i>
            <a>1st Year Technology and Engineering, specializing in Sustainable Development (STI2D - French Technical High School Program)<br></a>
        </p>
        <p>
            <i class="fa-solid fa-user"></i>
            <a>I am 17 years old, 11th grade</a>
        </p>
    </div>
</div>

You have to scroll down a bit to see the result of the code snippet.