I'm having trouble achieving the design I created in Figma: https://i.sstatic.net/aH6Cy.png
Instead, my actual code output looks like this (dummy text): https://i.sstatic.net/z5L0y.png
This is the CSS and SCSS for my page:
.navbarcont {
margin-top: 2em;
display: flex;
background-color: hsl(206, 97%, 13%);
border-radius: 34px;
width: 80vw;
height: 3em;
margin-left: auto;
margin-right: auto;
.links {
display: flex;
justify-content: flex-start;
margin-left: 2em;
align-items: center;
}
ul {
display: inherit;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.langcont {
display: inherit;
justify-content: flex-end;
align-items: center;
}
}
Here's the React HTML code I'm using:
<div className="navbarcont">
<div className="links">
<ul> {/*TODO: Remember to put icons before the a tags! (USE BOOTSTRAP ICONS!) */}
<li>
<a href="#">Hello</a>
</li>
<li>
<a href="#">Hello</a>
</li>
<li>
<a href="#">Hello</a>
</li>
</ul>
</div>
<div className="langcont">
<div className="langtext">
<p>Language Select</p>
</div>
</div>
</div>
I can't figure out why justify-content: flex-end; isn't working for the langcont class.
Any help would be greatly appreciated. Thank you!