Nav bar with 'float: left;' & 'float: right;' - html

Question

I want my nav bar to have the navigation buttons on the left & my signup/login to the right. I've managed to have a main nav bar, and a separated navbar for the login/signup, but that messes with my code.
I've tried to do something with the ':last-child' but it doesn't seem to work...
.nav-wrapper ul {
float: left;
padding-left: 50px;
}
.nav-wrapper ul li {
display: inline-block;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 36px;
}
.nav-wrapper ul li:last-child {
margin-right: 18px;
float: right;
}
.nav-wrapper ul li a {
display: inline-block;
outline: none;
color: #333333;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.24px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-style: normal;
}
<nav class="nav-bar">
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
"logo"
</div>
<div class="nav-wrapper">
<ul class="list">
<li>Home</li>
<li>Collections</li>
<li>Contact</li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>

Answer 1

in my opinion you can have a header element (the topbar), with two nav inside, each with its own alignment
<header class="topbar">
<div class="logo">
My logo
</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Collections</li>
<li>Contact</li>
</ul>
</nav>
<nav class="user">
<ul>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</nav>
</header>
and then
header.topbar {
position: relative;
display: block;
float: left;
width: 100%;
}
.logo {
position: relative;
display: block;
float: left;
}
nav.navigation {
position: relative;
display: block;
float: left;
}
nav.user {
position: relative;
display: block;
float: right;
}
nav ul {
position: relative;
display: block;
float: left;
list-style: none;
}
nav ul li {
position: relative;
display: block;
float: left;
margin: 0px 12px;
}

Answer 2

You can use flexbox on your ul element and move its last child element to the right by applying margin-left: auto to it (no floats needed in this case):
.nav-wrapper ul {
display: flex;
padding-left: 50px;
list-style: none;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 36px;
}
.nav-wrapper ul li:last-child {
margin-right: 18px;
margin-left: auto;
}
.nav-wrapper ul li a {
display: inline-block;
outline: none;
color: #333333;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.24px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-style: normal;
}
<nav class="nav-bar">
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
"logo"
</div>
<div class="nav-wrapper">
<ul class="list">
<li>Home</li>
<li>Collections</li>
<li>Contact</li>
<li>Log In</li>
<li>Sign Up</li>'
</ul>
</div>
</nav>

Answer 3

Regarding your code, it will work if you remove float: left; from .nav-wrapper ul.
In my opinion, it is more intuitive to use CSS grid, and divide your ul into two logical units (main ul for the left side, and secondary ul for the right side):
.nav-wrapper {
display: grid;
grid-template-columns: 1fr max-content;
}
.nav-wrapper ul.list {
display: flex;
list-style-type: none;
padding: 0;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 36px;
}
.nav-wrapper ul li a {
display: inline-block;
outline: none;
color: #333333;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.24px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-style: normal;
}
<div class="nav-wrapper">
<ul class="list list-main">
<li>Home</li>
<li>Collections</li>
<li>Contact</li>
</ul>
<ul class="list list-secondary">
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>