Why does this CSS behavior happen? (Portfolio Project)

I am working on my HTML/CSS portfolio page project. Using bootstrap’s navbar classes, I have been able to create my navbar properly. However, each link item stacks on top of each other unless I apply display: inline to navbar-nav and display: inline-block to each nav-item.

HTML:

      <ul class="navbar-nav">
        <li class="nav-item"><a href="#home" class="active">Home</a></li>
        <li class="nav-item"><a href="#about">About</a></li>
      </ul>

SCSS:

    ul.navbar-nav {
      display: inline;
      
      .nav-item {
        font-size: 18px;
        font-family: 'Ubuntu', sans-serif;
        display: inline-block;
      }
      
      ...
     }

I was under the impression that bootstrap should create inline nav-items automatically from https://v4-alpha.getbootstrap.com/components/navbar/. Am I wrong?

I am not allowed to put images in my post, so here’s the album: https://imgur.com/a/eXYko

Make sure you are applying the right classes according to https://getbootstrap.com/docs/3.3/components/#nav.
The following code should give you the expected behavior:

<ul class="nav nav-pills">
  <li class="nav-item active"><a href="#home">Home</a></li>
  <li class="nav-item"><a href="#about">About</a></li>
</ul>

See my codepen