I'm learning how to make a navbar and I can't align an item properly to the left.
here's my html code

```css
.navul {
  display: flex;
  height: 50px;
  background-color: rgb(71, 71, 71);
}

.navli1 {
  margin: auto;
}

.navli2 {
  margin-left: auto;
}

.navlink {
  text-decoration: none;
  color: white;
  background-color: rgb(0, 0, 0);
  padding: 16px 25px;
}

.navlink:hover {
  color: rgb(175, 175, 175);
}

ul {
  list-style: none;
}
```

```html
<header>
  <ul class="navul">
    <li class="navli1">
      <a class="navlink" href="#">Home</a>
    </li>
    <li class="navli2">
      <a class="navlink" href="#">Logout</a>
    </li>
  </ul>
</header>
```

here's the result, notice logout item is outside the ul container.
[![header](https://i.stack.imgur.com/QUn3f.png)](https://i.stack.imgur.com/QUn3f.png)