I am having trouble getting this to display on a single line, no matter what I try. While there may be simpler ways to achieve this without using flexbox, I am eager to learn how to do it using flexbox properties.
My desired outcome is to have the first unordered list displayed on the left, and the second one on the far right, both on the same line.
.navigation ul {
display: flex;
flex-direction: row;
list-style: none;
flex-wrap: nowrap;
}
.leftNav {
justify-content: flex-start;
}
.rightNav {
justify-content: flex-end;
}
.navigation a {
text-decoration: none;
}<header>
<nav class="navigation">
<div class="leftNav">
<ul>
<li>Menu</li>
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
</ul>
</div>
<div class="rightNav">
<ul>
<li><a href="">My Account</a></li>
<li><a href="">Login</a></li>
</ul>
</div>
</nav>
</header>