Why are my items not aligning horizontally in Flexbox navbar?

Question

I have been playing around with the navbar from the Youtube video "Animated Responsive Navbar with CSS" from the channel Fireship. I am trying to get the items in my navbar to align to center horizontally. The HTML has the following structure:

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">Home</span>

And my CSS is:

.navbar {
    position: fixed;
    background-color: var(--bg-primary);
    transition: width 600ms ease;
    overflow: auto;
  }
  
  .navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
  }
  
  .nav-item {
    width: 100%;
  }
  
  .nav-link {
    display: flex;
    align-items: center;
    height: 5rem;
    color: var(--text-primary);
    text-decoration: none;
    filter: grayscale(100%) opacity(0.7);
    transition: var(--transition-speed);
  }

As I understand it setting the following should center the items horizontally:

1. Set .navbar-nav to display:flex
2. Set .navbar-nav to flex-direction:column
3. Set .navbar-nav to align-items center;

However, what I end up with is the following:

Any help is greatly appreciated.

Answer 1

Change flex-direction: column; to flex-direction: row;

row will align items horizontally in a flex-box whereas column aligns items vertically as your original result.

html { /* added these rules to better match OG styles in provided picture */
  background-color: #223; color: #dde; font-family: Arial; padding-left: 2rem;
}
.navbar { position: fixed; transition: width 600ms ease; overflow: auto; }
.navbar-nav {
  list-style: none; padding: 0;
  margin: 0; display: flex;
  flex-direction: row; /* changed "column" to "row" */
  align-items: center; height: 100%;
}
.nav-item { width: 100%; }
.nav-link {
  display: flex; justify-content: center; align-items: center; height: 5rem;
  padding: 1rem; /* added padding so you can see nav items better */
  color: var(--text-primary); text-decoration: none;
  filter: grayscale(100%) opacity(0.7);
}
.logo { position: relative; } /* This and below to add logo next to nav items */
.logo::before { 
  display: block; transform: scale( 1.25 ); position: absolute; 
  top: 3rem; width: 1rem; height: 1rem; 
  background-image: url( "https://i.sstatic.net/ejyfV.png" );
  background-size: 6rem; background-position: -0.06rem -1rem;
  content: "";
}
.logo:nth-of-type( 1 )::before { background-image: none; }
.logo:nth-of-type( 3 )::before { background-position: -0.06rem -2.85rem; }
.logo:nth-of-type( 4 )::before { background-position: -0.06rem -4.7rem; }
.logo:nth-of-type( 5 )::before { background-position: -0.06rem -6.55rem; }

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">Home</span>
      </a>
    </li>
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">About</span>
      </a>
    </li>
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">Work</span>
      </a>
    </li>
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">Pricing</span>
      </a>
    </li>
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">Contact</span>
      </a>
    </li>
  </ul>
</nav>

Answer 2

As said in this link (w3 schools), try flex-direction: row. this is because flex-direction: column aligns vertically instead of horizontally