how to put li elements in the same line of nav bar code example

Example 1: display li in navbar in the same line

<div id="main-header">
  <div class="container">
    <h1 id="logo">HM</h1>
    <nav id="navbar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#" target="_blank">Github</a></li>
        <li><a href="#" target="_blank">Twitter</a></li>
      </ul>
    </nav>
  </div>
</div>

Example 2: display li in navbar in the same line

body{
  background-color:#fff;
  color:#00f;
  font-family:"Raleway", Helvetica, sans-serif;
  margin:0;
}
.container {
  display:flex;
  justify-content:space-between;
  align-items:center; 
}
#logo{
  border:3px solid;
  padding:0 10px;
}
#navbar li{
  display:inline-block;
}
#navbar a{
  text-decoration:none;
  font-size:18px;
  padding-right:15px;
}