title: Navbar elements are stacked on top of each other, I want them next to each other
body: <p>I am trying to build a website but I am new to coding. The nav bar is displaying the elements on top of each other. How can I make them next to each other?
  Here is my code. Thank you in advance :)
  html:</p>
  
  <pre><code>&lt;nav class="navbar"&gt;
      &lt;span class="navbar-toggle" id="js-navbar-toggle"&gt;
          &lt;i class="fas fa-bars"&gt;&lt;/i&gt;
      &lt;/span&gt;
      &lt;a href="#" class="logo"&gt;
          &lt;div class="logo_area"&gt;
              &lt;div&gt;
                &lt;img id="website_logo" src="images/logo.png" alt="Logo"&gt;
              &lt;/div&gt;
              &lt;div class="site_title"&gt;
                &lt;h1 class="title"&gt;title&lt;/h1&gt;
                &lt;h2 class="subtitle"&gt;subtitle&lt;/h2&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  
      &lt;ul class="main-nav"&gt;
          &lt;li&gt;
              &lt;a href="index.html" class="nav-links"&gt;HOME&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="about.html" class="nav-links"&gt;ABOUT&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="contact.html" class="nav-links"&gt;CONTACT&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>.........................................................................................................
  css:</p>
  
  <pre><code>.navbar {
    font-size: 18px;
    background: rgba(196, 196, 196, 0.6);
    padding-bottom: 10px;
  }
  
  .main-nav {
    display:inline;
  }
  .nav-links,
  .logo {
    text-decoration: none;
    color: black;
    font-family: raleway, sans-serif;
  }
  
  .fa-bars:before{
    color: black;
  }
  
  .main-nav li {
    text-align: center;
    margin: 15px auto;
  }
  
  .logo {
    display: inline-block;
    font-size: 22px;
    margin-top: 10px;
    margin-left: 20px;
  }
  
  .navbar-toggle {
    position: absolute;
    top: 26px;
    right: 20px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 24px;
  }
  </code></pre>
  
  <p>.......................................................................................................</p>