Navbar sliding to the right

Question

<!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
          <div class="container-fluid">
            <span class="navspacing"></span>
            <a class="navitems hover" href="{% url 'home' %}">Home</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
              <span style="margin:5px;" class="navbar-toggler-icon"></span>
            </button>
            <div class=" collapse navbar-collapse topnav" id="collapsibleNavbar">
              <ul class="navbar-nav" >
                {% if user.is_authenticated %}
                <li class="nav-item navitems">
                  <a class="nav-link hovering" href="{% url 'light_novel:characters_page' %}">Characters</a>
                </li>
                <li class="nav-item navitems">
                  <a class="nav-link " href="{% url 'light_novel:moves_page' %}">Moves</a>
                </li>
                <li class="nav-item navitems">
                  <a class="nav-link" href="{% url 'light_novel:chapters_page' %}">Chapters</a>
                </li>
                <li class="nav-item navitems">
                  <a class="nav-link" href="{% url 'light_novel:outfits_page' %}">Outfits</a>
                </li>
                <li class="nav-item navitems">
                  <a class="nav-link" href="{% url 'light_novel:sights_page' %}">Sight</a>
                </li>
                <li class="nav-item navitems">
                  <a class="nav-link" href="{% url 'light_novel:timelines_page' %}">Timeline</a>
                </li>
                <li class="nav-item navitems">
                  <a class="nav-link" href="{% url 'light_novel:scratchpads_page' %}">Scratchpad</a>
                </li>
                <li class="nav-item navitems">
                  <a class="nav-link" href="{% url 'light_novel:statistics' %}">Statistics</a>
                </li>
                <li class="nav-item navitems">
                  <a class="nav-link" href="{% url 'logout' %}">Logout</a>
                </li>
                {% else %}
                <li class="nav-item navitems">
                  <a class="nav-link" href="{% url 'login' %}">Login</a>
                </li>
                {% endif %}
              </ul>
            </div>
          </div>
        </nav>
        <!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>