How can we align items with margins?

We can use margins to align certain items such as logos on a menu options bar.

We can convert this:

<header>
    <nav>
      <ul>
        <li><a href="">Menu</a></li>
        <li><a href="">News</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
  </header>

nav ul {
  margin: 0; /* Reset margins */
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
}
nav ul li a {
  display: block;
  border: 1px solid;
  border-radius: .5em;
  padding: .5em 1em;
  margin: .5em;
}

Into this, by using the margin property:

nav ul {
  margin: 0; /* Reset margins */
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
}
nav ul li a {
  display: block;
  border: 1px solid;
  border-radius: .5em;
  padding: .5em 1em;
  margin: .5em;
}

nav ul li:first-child {
  margin-right: auto; /* This is the new code */
}