Элементы HTML движутся при добавлении кадров и контейнеров ⇐ Html

[Anonymous]

Я искал, и я ничего не нахожу, для названия контекста, в последние несколько дней я строю свое портфолио, я являюсь бэкэнд -разработкой, поэтому я не привык ни к чему из этих вещей. < /p>
Я добавил баннер, на котором есть моя фотография в профиле, и я добавляю несколько информации на стороне, как учебный год, мой LinkedIn, GitHub и электронная почта. Но недавно я добавил несколько контейнеров и элементов для демонстрации моих проектов, и когда я сделал это, эти элементы пошли дальше. Как показано на изображении
, я хочу поместить текст в красную коробку, но я не знаю, как это, я также знаю, что мы не должны размещать фотографии, но я не вижу лучшего способа Чтобы объяснить мою проблему. Я также пытался использовать Top =; и flex box

Это мои css и html структуры:

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

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





[/i]
[url=https://github.com/Gustavo-DCosta]
[i][/i] GitHub profile
[/url]

[i][/i]
[url=mailto:gdacostapereira66@gmail.com]gdacostapereirea66@gmailil.com[/url]



[i][/i]
1st Year Technology and Engineering, specializing in Sustainable Development (STI2D - French Technical High School Program)


[i][/i]
I am 17 years old, 11th grade

Подробнее здесь: https://stackoverflow.com/questions/794 ... containers