CSS - Нужна помощь в размещении первого элемента гибкого контейнера на полпути на вершине контейнера ниже него ⇐ Html

[Anonymous]

У меня проблемы с позиционированием контейнера. Вот каркас, который я создал на фигме, который я хочу достичь:
Figma. Получите их до желаемой позиции. Они последовательно зависят над прямоугольником. < /P>
Вот мой код: < /p>

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

.flex-container {
/*parent flexbox*/
display: flex;
overflow: hidden;
}

.header-container {
flex: 1;
align-items: left;
margin-left: 2rem;
top: 2rem;
z-index: 2;
}

h1 {
/*font formatting*/
font-family: var(--font-display);
font-size: 165px;
gap: 0.5rem;
}

nav {
/*nav container*/
flex: 1;
gap: 1.5rem;
align-items: right;
margin-top: 1rem;
margin-right: 2rem;
overflow: hidden;
}

nav a {
/*nav font formatting*/
font-weight: 700;
font-size: 1.2rem;
font-family: var(--font-main);
text-decoration: none;
color: black;
}

/*white rectangle*/
.main-container-index {
background-color: var(--color-cream);
margin: 2rem auto;
max-width: 90%;
min-height: 60vh;
border-radius: 70px 70px 20px 20px;
padding: 2rem;
position: relative;
z-index: 1;
}< /code>


portfolio


[url=projects.html]PROJECTS[/url]
[url=blog.html]BLOG[/url]
[url=contact.html]CONTACT[/url]

Подробнее здесь: https://stackoverflow.com/questions/796 ... -top-of-th