Can't move 'logout' button to the right-CodePudding

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 >
    <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
    </button>
    <div  id="navbarNav">
        <ul  style="height: 4rem;">
            <li >
                <a  href="{% url 'signed in' %}">Home</a>
            </li>
            <li >
                <a  href="{% url 'add meal' %}">Add Meal</a>
            </li>
            <li >
                <a  href="{% url 'view private profile' %}">View Private Profile</a>
            </li>
            <li >
                <a  href="{% url 'view food log' %}">Food Log</a>
            </li>
            <li >
                <a  href="{% url 'view friends' %}">Friends</a>
            </li>
            <li >
                <a  href="{% url 'settings' %}">Settings</a>
            </li>
            <li  style="float: right">
                <a  href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
            </li>
        </ul>
    </div>
</nav>

Thank you for your time.

CodePudding user response：

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;" >
        <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
        <div  width="100%" id="navbarNav">
            <ul  style="height: 4rem;">
                <li >
                    <a  href="{% url 'signed in' %}">Home</a>
                </li>
                <li >
                    <a  href="{% url 'add meal' %}">Add Meal</a>
                </li>
                <li >
                    <a  href="{% url 'view private profile' %}">View Private Profile</a>
                </li>
                <li >
                    <a  href="{% url 'view food log' %}">Food Log</a>
                </li>
                <li >
                    <a  href="{% url 'view friends' %}">Friends</a>
                </li>
                <li >
                    <a  href="{% url 'settings' %}">Settings</a>
                </li>
            </ul>
        </div>
        <a  href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
    </nav>

CodePudding user response：

change this

<li  style="float: right">
                <a  href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
</li>

to this

<li  style="float: right; width: 100%;">
                <a  href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
</li>