Navbar sliding to the right - html

Question

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/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/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>