How to make a nav-item reach the end of the page - html

Question

I am new to Bootstrap and web development but I am trying to reorganize the default navbar that is generated with the execution of a blank asp.net core 2.2 web application. When this web app is generated there are nav-items that are floated to the left, but in this navbar I want to add another nav-item for log in and place it all the way to the right of the page similar to how many websites place their login links.
I have tried playing around with margins and padding in the container as well as in the navbar. When I would change the margins for the left and right side of the container it would just shift the entire navbar in one direction either left or right. I have also opened up and looked at the bootstrap.css in order to see how it works and trying to see if I could find useful information. I have also tried playing around with the different nav-bar classes.
//I tried playing around with margins in my css as such
.container{
padding-left: 0px;
padding-right: 0px;
}
//part of my layout page
<header>
`<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light
bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-
page="/Index">RazorPagesDemo</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target=".navbar-collapse" aria-
controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-
sm-row ">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
page="/Privacy">Privacy</a>
</li>
</ul>
<ul class="navbar-nav flex">
<li>
<a class="nav-link text-dark" asp-area="" asp-
page="/Login">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Here I would like to make it so that my login nav-item reaches all the way to the right corner.

Answer 1

You could set style as position:absolute;right:0 to place it at the right of page:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesDemo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row ">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
page="/Index">Home1</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
page="/Privacy">Privacy1</a>
</li>
</ul>
<ul class="navbar-nav flex" style="position:absolute;right:0">
<li>
<a class="nav-link text-dark" asp-area="" asp-page="/Login">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>

Answer 2

As long as your navigation is inside .container it will be max-width: 1140px wide and centered because of margin-left: auto and margin-right: auto.
Try to use .container-fluid or remove container div so it will be full width "from left to right".