I'm having trouble with the positioning of a container. Here is the wireframe I created in figma that I want to accomplish: figma wireframe reference photo"Portfolio" and the navigation next to it are two flex items in a flex container and I cannot seem to figure out how to get them to the position I want. They are consistently hovering above the rectangle.
Here is my code:
.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;}<header class="flex-container"><div class="header-container"><h1 style="color:var(--color-red)">portfolio</h1></div><nav><a href="projects.html">PROJECTS</a><a href="blog.html">BLOG</a><a href="contact.html">CONTACT</a></nav></header><main class="main-container-index"><!-- white rectnagle --></main>