Bootstrap 4 Navbar does not collapse when viewport gets narrowed

HTML-CSS
1

why is my bootstrap 4 vabar collapse toggle is broken??

Here’s the codepen link.

I’ve included bootstrap’s css, javascript link, as well as jquery’s js link, popper js etc.

1st I thought it was one modal element I added in caused it, but after commenting out, the navbar still does not collapse under narrow viewport.

  <!--Nav Bar-->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#"><img src="https://res.cloudinary.com/zzrot/image/upload/v1543380836/trick2g_site/favicon.png"
        width="30" height="30" alt="">Trick2g's un-official site version 2</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse d-flex" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="#" class="nav-link" data-toggle="modal" data-target=".bd-example-modal-lg" onclick="addRandomQuote()"
            id="quote_button"><i class="fas fa-quote-right fa-2x"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://twitter.com/zh0ux1ang" target="_blank"><i class="fab fa-twitter fa-2x"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://github.com/zhouxiang19910319" target="_blank"><i class="fab fa-github fa-2x"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://zhouxiang19910319.github.io/project_documentations/2018/12/12/Trick2g-Site-Project-Documentation.html"
            target="_blank"><i class="fas fa-info-circle fa-2x"></i></a>
        </li>
      </ul>
    </div>
  </nav>
  <!--end of Nav bar-->

  <!--bootstrap 4 modal section-->
  <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title" id="modal_title">Random Quote From Trick's youtube channel</h2>
        </div>
        <div class="modal-body">
          <img src="https://res.cloudinary.com/zzrot/image/upload/v1544535327/trick2g_site/LUL.png" alt="LUL" id="quote_image">
          <p id="quote_p">
          </p>
        </div>
      </div>
    </div>
  </div>
2

<div class="collapse navbar-collapse d-flex" id="navbarNav">

Nevermind I figured this out… I need to delete d-flex in the above line.