Bootstrap 4 toggle nav-bar question

Bootstrap 4 toggle nav-bar question


When I’m at col-sm or col-xs The toggle button shows up like it’s supposed to but if I click on it I can’t seem to get the nav-links to line up properly any flex-box tricks I can try to make that happen?

I have my Codepen here.
if you reduce it to say the width of a I-Phone (4) then the menu items don’t line up correctly. I’d like to fix that.

The core of my code is here.

<nav class="navbar navbar-expand-md fixed-top">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
   <i class="fas fa-bars"></i>
      <div class="collapse navbar-collapse navbar-toggleable-sm pull-right" id="exCollapsingNavbar">
        <ul id="top-nav" class="nav nav-pills pull-right">
          <li class="nav-item active">
            <a class="nav-link" href="/login"><i class="fas fa-users"></i> Members</a></li>
          <li class="nav-item"><a class="nav-link" href="#tour"><i class="fas fa-store"></i> Features</a></li>
          <li class="nav-item">
            <a class="nav-link" href="#about"><i class="fas fa-user"></i> About</a></li>
          <li class="nav-item">
            <a class="nav-link" href="#gallery"><i class="fas fa-camera"></i> Gallery</a></li>
          <li class="nav-item">
            <a class="nav-link" href="#videos"><i class="fas fa-video"></i> Videos</a></li>
          <li class="nav-item">
            <a class="nav-link" href="/cart/"><i class="fas fa-cart-plus"></i> Join</a>


Okay adding the navbar-nav class to my ul and justify-content-between on my navbar-collapse div has given me a workable solution. (I also pulled out the pull-right class as that didn’t seem to be working anyway. I still think I’d rather it was was 2 or 3 columns lined up. But if that’s a lot of extra work I can live with this.