margin-left not merging with auto - html

Question

margin-left: auto seems not working
1- Header with an image and a navbar
2- Two unorder list in a navbar
2- Try to get one of the list on the left side and the second in the right side
If I use margin-left: 800px, it's working however, it's not with auto.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header{
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 10px;
}
nav{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
margin-left: 15px;
}
.nav__links_R, .nav__links_L, a {
text-decoration: none;
list-style: none;
float: left;
color:rgba(0, 0, 0, .50);
}
.nav__links_R {
margin-left: auto;
}
.nav__links_L li {
display: inline-block;
padding: 0px 20px;
}
.nav__links_R li {
display: inline-block;
padding: 0px 20px;
}
<header>
<img src="../photo/logo_dark.png" alt="logo">
<nav>
<ul class=nav__links_L>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class=nav__links_R>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</header>
Everything is displaying well as expecting. Only ".nav__links_R" not going to the right side with "auto"

Answer 1

Add the following two style rules to nav:
width: 100%;
display: flex;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header{
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 10px;
}
nav{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
margin-left: 15px;
display: flex;
width: 100%;
}
.nav__links_R, .nav__links_L, a {
text-decoration: none;
list-style: none;
float: left;
color:rgba(0, 0, 0, .50);
}
.nav__links_R {
margin-left: auto;
}
.nav__links_L li {
display: inline-block;
padding: 0px 20px;
}
.nav__links_R li {
display: inline-block;
padding: 0px 20px;
}
<header>
<img src="http://placekitten.com/200/40" alt="logo">
<nav>
<ul class=nav__links_L>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class=nav__links_R>
<li>Register</li>
<li>login</li>
</ul>
</nav>
</header>