Navbar element to right without bottom space

Issue

I'm trying to make the navbar's Logout text element to the right without any bottom space.

A part of HTML Code:

  <div id="nav">
    <div id="nav-left">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Editor</li>
      </ul>
    </div>
    <div id="nav-right">
      <ul>
        <li>Logout</li>
      </ul>
    </div>
  </div>

A part of CSS Code:

#nav {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  background-color: #1c1c1c;
}
#nav-left {
  text-align: left;
}
#nav-right {
  text-align: right;
}

Solution

You can use display: flex and justify-content: space-between on the parent element (#nav) for the left/right placement, and display: inline-block; on the li elements in there to have them horizontally arranged:

#nav {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  background-color: #1c1c1c;
}

#nav-left {
  text-align: left;
}

#nav-right {
  text-align: right;
}

#nav ul {
  padding: 0;
}

#nav li {
  display: inline-block;
  padding: 0 1em;
}

* {
  color: white;
}

<div id="nav">
  <div id="nav-left">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Editor</li>
    </ul>
  </div>
  <div id="nav-right">
    <ul>
      <li>Logout</li>
    </ul>
  </div>
</div>

Answered By - Johannes