Can't move 'logout' button to the right

After several hours of research and variout attempts, I cannot seem to workout how to move this Logout button from within my Navbar to the very right of the screen.

I have tried every example I can find online, creating a new nav bar, setting the float to right, text align to the right, etc.

Please find the attached HTML/Django:

navbar.html:

<nav class="navbar navbar-expand-lg navbar-light bg-light p-0">
    <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" id="navbarNav">
        <ul class="navbar-nav" style="height: 4rem;">
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'signed in' %}">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'add meal' %}">Add Meal</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'view private profile' %}">View Private Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'view food log' %}">Food Log</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'view friends' %}">Friends</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="{% url 'settings' %}">Settings</a>
            </li>
            <li class="nav-item" style="float: right">
                <a class="nav-link p-3" href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
            </li>
        </ul>
    </div>
</nav>

Thank you for your time.

Solution

This is because the logout link is enclosed within the div tag in your navbar. Try moving it outside the div block.

<nav style="background-color: green;" class="navbar navbar-expand-lg navbar-light bg-light p-0">
        <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" width="100%" id="navbarNav">
            <ul class="navbar-nav" style="height: 4rem;">
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'signed in' %}">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'add meal' %}">Add Meal</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'view private profile' %}">View Private Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'view food log' %}">Food Log</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'view friends' %}">Friends</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link p-3" href="{% url 'settings' %}">Settings</a>
                </li>
            </ul>
        </div>
        <a class="nav-item mr-3 nav-link p-3" href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
    </nav>