Navbar elements are stacked on top of each other, I want them next to each other

Question

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:

<nav class="navbar">
    <span class="navbar-toggle" id="js-navbar-toggle">
        <i class="fas fa-bars"></i>
    </span>
    <a href="#" class="logo">
        <div class="logo_area">
            <div>
              <img id="website_logo" src="images/logo.png" alt="Logo">
            </div>
            <div class="site_title">
              <h1 class="title">title</h1>
              <h2 class="subtitle">subtitle</h2>
            </div>
        </div>
    </a>

    <ul class="main-nav">
        <li>
            <a href="index.html" class="nav-links">HOME</a>
        </li>
        <li>
            <a href="about.html" class="nav-links">ABOUT</a>
        </li>
        <li>
            <a href="contact.html" class="nav-links">CONTACT</a>
        </li>
    </ul>
</nav>

......................................................................................................... css:

.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;
}

.......................................................................................................

Answer 1

Since you are using list here it is positioned vertical, If you need it to be aligned horizontally, use display:inline-block; in the <li> tag.

Answer 2

You can easily solve this situation with flexbox.

Step 1.

By applying display: flex on a container element in this case <nav class="navbar"> you make all child elements stack horizontally to each other.

Step 2.

By applying (again) display: flex on a <ul class="main-nav"> to make child elements <li>s stack horizontally to each other.

Horizontal spacing can be applied with justify-content attributes.

Here is a minimal example.

/*
assigning height of the navbar
and aligning contents center
*/

.navbar {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* You can assign width
on the child elements
*/

.logo {
  width: 10%;
}

.main-nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  height: 100%;
  align-items: center;
}

/*
Adding some margin
or you could use space-between; on ul
*/

li {
  margin-right: 1em;
}

li:last-child {
  margin-right: 0;
}

<nav class="navbar">
    <span class="navbar-toggle" id="js-navbar-toggle">
        <i class="fas fa-bars"></i>
    </span>
    <a href="#" class="logo">
        <div class="logo_area">
            <div>
              <img id="website_logo" src="images/logo.png" alt="Logo">
            </div>
            <div class="site_title">
              <h1 class="title">title</h1>
              <h2 class="subtitle">subtitle</h2>
            </div>
        </div>
    </a>

    <ul class="main-nav">
        <li>
            <a href="index.html" class="nav-links">HOME</a>
        </li>
        <li>
            <a href="about.html" class="nav-links">ABOUT</a>
        </li>
        <li>
            <a href="contact.html" class="nav-links">CONTACT</a>
        </li>
    </ul>
</nav>

Learn more about Flexbox from CSS-Tricks here.

New cool ways to do layouts

Happy Coding!

Answer 3

Sara, nice that you started coding! One of my own tricks I use is to add

* { outline: 1px solid red; }

Then you can see all your elements and what spaces they take. You can see you added the display: inline; to the <ul> element instead it's better to place it on the <li> element.

See the example below, happy coding!

.navbar {
  font-size: 18px;
  background: rgba(196, 196, 196, 0.6);
  padding-bottom: 10px;
}

.main-nav {
  /* display: inline; removed */
}
.nav-links,
.logo {
  text-decoration: none;
  color: black;
  font-family: raleway, sans-serif;
}

.fa-bars:before{
  color: black;
}

.main-nav li {
  display: inline; /* added */
  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;
}

<nav class="navbar">
    <span class="navbar-toggle" id="js-navbar-toggle">
        <i class="fas fa-bars"></i>
    </span>
    <a href="#" class="logo">
        <div class="logo_area">
            <div>
              <img id="website_logo" src="images/logo.png" alt="Logo">
            </div>
            <div class="site_title">
              <h1 class="title">title</h1>
              <h2 class="subtitle">subtitle</h2>
            </div>
        </div>
    </a>

    <ul class="main-nav">
        <li>
            <a href="index.html" class="nav-links">HOME</a>
        </li>
        <li>
            <a href="about.html" class="nav-links">ABOUT</a>
        </li>
        <li>
            <a href="contact.html" class="nav-links">CONTACT</a>
        </li>
    </ul>
</nav>