[FIXED] How to move a element of a list to the right of a menu bar in a MVC app?

Issue

I have a MVC app and the menu bar is created using a list. At the moment each element of the list is displayed from left to right. What's the easiest way to have the last element of the list to be shown to the right of the menu bar?

This is the code for the menu at the moment:

        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" title="more options">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Candidate Site", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Log Out", "LogOut", "Login")</li>
                </ul>
            </div>
        </div>
    </div>

Solution

There are a couple of options. Make the container display:flex. You can style the last div with margin-inline: auto 0; or alternatively add an extra div in the middle and style this with flex-grow:2 to push the items on the left to the left hand side and the one to the right over to the right.

I've added a few borders so you can see what's going on but you get the general idea

.container {
      display: flex;
      border: 1px solid red;
      gap: 0.1rem;
    }

    .container>div {
      border: 1px solid black;
      padding: 0 0.25rem;
    }

    .right-hand-div {
      margin-inline: auto 0;
    }

<div class="container">
    <div class="navbar-header">
     Left 2
    </div>
    <div class="navbar-header">
      Left 2
    </div>
    <div class="navbar-collapse collapse right-hand-div">
      Right
    </div>
  </div>

Answered By - Adam

Answer Checked By - David Marino (PHPFixing Volunteer)