Bootstrap dropdown not appearing directly under navbar button

I am very new to bootstrap and html/css so sorry if this may be an obvious question. I am working on a Django project and I am currently trying to have a navbar button be a dropdown to have multiple different options. Like what you typically see in a profile dropdown in a lot of websites. Currently I am able to get that working but the dropdown appears on the far left side of the page and not directly under the button like what you expect. I followed bootstraps documentation on the navbar but it seems to still only show on the left side. Is there something I am missing?

Here is what the output is currently like on the website:

Here is the html code:

    <header class="site-header">
    <nav class="navbar navbar-expand-md navbar-dark bg-jj fixed-top">
      <div class="container">
        <a class="navbar-brand mr-4 jjfont" href="/">
          <i class="material-icons">logo</i>   WEBSITE NAME</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarToggle">
          <div class="navbar-nav mr-auto">
            <!-- Navbar Left Side Goes Here -->
          </div>
          <!-- Navbar Right Side -->
          <div class="navbar-nav">
            {% if user.is_authenticated %}
              <!-- home icon -->
              <a class="nav-item nav-link" href="/">
                <i class="material-icons">home</i>
              </a>
              <!-- create icon -->
              <a class="nav-item nav-link" href="{% url 'post-create' %}">
                <i class="material-icons">post_add</i>
              </a>
              <!-- messages icon -->  
              <a class="nav-item nav-link" href="#">
                <i class="material-icons">chat</i>
              </a>
              <!-- profile icon -->
              <a class="nav-link dropdown-toggle" type="button" data-toggle="dropdown" href="#" id="navbarDropdown" aria-haspopup="true" aria-expanded="false">
                <i class="material-icons">face</i>
              </a>
                  <div class = "dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{% url 'profile' %}">Profile</a>
                    <a class="dropdown-item" href="{% url 'logout' %}">Settings</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
                  </div>
            {% else %}
              <a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
              <a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
            {% endif %}
          </div>
        </div>
      </div>
    </nav>