- Having trouble with margin-left: auto not working 1- Looking to create a header with an image and a navbar 2- Want two unordered lists in the navbar 3- Trying to position one list on the left side and the second on the right side
When I use margin-left: 800px, it works fine but 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><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class=nav__links_R>
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
</header>Everything looks as expected except for ".nav__links_R" not aligning to the right using "auto"