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

[Anonymous]

У меня проблемы с позиционированием контейнера. Вот каркас, который я создал в Figma, который я хочу выполнить: Figma Rabrame Studer Photo «Portfolio», и навигация рядом с ним представляют собой два изгибных элемента в гибком контейнере, и я не могу выяснить, как привести их в желаемое положение, которое я хочу. Они последовательно зависят над прямоугольником. < /P>
Вот мой код: < /p>


portfolio


PROJECTS
BLOG
CONTACT








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


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