Align logo in left with link on the right navbar - html

Question

I wanna to put a logo in the left of the navigation.
The links are set to justify-content: flex-end;
I tried to make a div element and make it important with !important property.
.navbar {
background-color: #242931;
top: 0%;
text-align: center;
justify-content: flex-end;
display: flex;
}
.left-nav {
justify-content: flex-start !important;
display: flex !important;
}
.navbar a {
color: #b7c2d0;
font-family: cubano;
font-size: 1.15rem;
text-decoration: none;
margin-right: 15px;
margin-left: 15px;
padding: 24px;
}
.navbar a:hover {
-webkit-background-clip: text;
background-image: linear-gradient(to right, #ff6e00, #ff9400, #ffb900, #f8dc00, #e9ff00);
background-clip: text;
color: transparent;
}
<div class="navbar">
<div class="left-nav">
example
</div>
Guides
Clips
Leaderborard
Support the server
Help
Rules
</div>

Answer 1

You don't need any div
simply assign margin-right: auto
to the first a (logo)
.navbar {
display: flex;
gap: 2em;
}
.navbar a:first-child {
margin-right: auto;
}
<div class="navbar">
LOGO
two
three
</div>
If you want to separate those two groups, wrap the actual navigation into a <nav> tag (and for better SEO), and use instead a margin-left: auto on it. The principle is the same:
.navbar {
display: flex;
}
.navbar nav {
display: flex;
gap: 2em;
margin-left: auto;
}
<div class="navbar">
LOGO
<nav>
two
three
</nav>
</div>

Answer 2

Nest the right-nav in a div also. Then you can use justify-content: space-between; which will space out the two divs. Then you can add align-items: center; to make them align.
.navbar {
background-color: #242931;
top: 0%;
text-align: center;
justify-content: space-between;
display: flex;
align-items: center;
}
.left-nav {
justify-content: flex-start !important;
display: flex !important;
}
.navbar a {
color: #b7c2d0;
font-family: cubano;
font-size: 1.15rem;
text-decoration: none;
margin-right: 15px;
margin-left: 15px;
padding: 24px;
}
.navbar a:hover {
-webkit-background-clip: text;
background-image: linear-gradient(to right, #ff6e00, #ff9400, #ffb900, #f8dc00, #e9ff00);
background-clip: text;
color: transparent;
}
<div class="navbar">
<div class="left-nav">
example
</div>
<div class="right-nav">
Guides
Clips
Leaderborard
Support the server
Help
Rules
</div>
</div>