It’s simplified a bit, but the HTML looks something like this:
.navigationContainer {
display: flex;
flex-direction: column;
width: 243px;
min-width: 0;
max-width: 242.91015625px;
height: 1117px;
background-color: #374151;
}
.mainContent {
padding-left: 20%;
display: flex;
flex-direction: column;
row-gap: 40px;
margin: 16px 50px 50px 0;
min-width: 0;
max-width: 1380.60546875px;
}<nav class="navigationContainer">
... navigation
</nav>
<main class="mainContent">
... some content
</main>For some reason, the Main content appears below the Nav content instead of to the right of it. I know that it’s a problem with the CSS, but I can’t figure out what needs to change to get it to appear the way I intend it to. Any help is greatly appreciated.
>Solution :
You need to put your nav and main inside a display:flex, with that element set to flex-direction: row. Right now you’ve declared both elements as being "regular" content blocks, with flex positioning for their child content.
div:has(nav,main) {
display: flex;
flex-direction: row;
nav, main {
min-height: 100px;
}
nav {
background-color: #c7c1c1;
}
main {
background-color: #a6c7a1;
}
}<div>
<nav class="navigationContainer">
... navigation
</nav>
<main class="mainContent">
... some content
</main>
</div>(and that could of course also just be the <body> element rather than a <div>)