Check out the screenshots to see what I am aiming for here.
https://i.sstatic.net/fFBQh.jpg
https://i.sstatic.net/DAEJM.jpg
I am trying to align the menu list items (My application, Register, Login) to the far right of the screen. Despite experimenting with margins and float:right, I haven't been able to achieve this yet.
The container div takes up the full width. Do you think I need to make changes to this div?
I've put together a codeped to demonstrate this
https://codepen.io/jquerypain121/pen/OJNaWpa
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log in - PhotoUploaderForm</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-white border-bottom box-shadow mb-3">
<div class="container">
<img src="https://lh3.googleusercontent.com/proxy/HQAE10KQ0NmS9htB5BKSoN24jWvyaizAKwhGy8hNVVsCbFUubvDdLSsYB8xWbN3JUDzDuAzw0OxKO5QZyL_XPqitq1wcSYaMVJ35_oC48c4FKZYykJUoucS-LJT1" width="200" title="title" alt="additional title">
<a class="navbar-brand" href="/">My Application</a>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class=" moveright nav navbar-nav">
<a class="navbar-brand" href="/">My Application</a>
<li class="nav-item">
<a class="nav-link text-dark" id="register" href="/Identity/Account/Register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" id="login" href="/Identity/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
<main role="main" class="pb-3">
<h1>Log in</h1>
<div class="row">
<div class="col-md-4">
<section>
<form id="account" method="post" action="/Identity/Account/Login" novalidate="novalidate">
<hr>
<div class="text-danger validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
<div class="form-group">
<label for="Input_Email">Email</label>
<input class="form-control" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Input_Email" name="Input.Email" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Input.Email" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<label for="Input_Password">Password</label>
<input class="form-control" type="password" data-val="true" data-val-required="The Password field is required." id="Input_Password" name="Input.Password">
<span class="text-danger field-validation-valid" data-valmsg-for="Input.Password" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label for="Input_RememberMe">
<input type="checkbox" data-val="true" data-val-required="The Remember me? field is required." id="Input_RememberMe" name="Input.RememberMe" value="true">
Remember me?
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" formaction="/Identity/Account/Login?returnUrl=%2F">Log in</button>
<input type="hidden" id="ReturnUrl" name="ReturnUrl" value="/">
</div>
<div class="form-group">
<p>
<a href="/Identity/Account/Register?returnUrl=%2F">Register as a new user</a>
</p>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8PEcG7qoomVJk-wiZaqy0p6b5tfvXZTuVH-9YakoOKQQf8mWfBn4MYD7BCb3YKL_NmEz_Ru57zD8PV8Tq_6ea5WApccwrpwYrOkBdu7Qu9Z6NMycGCHqDTI35Ci1mPMVQSqyQ47sNdvfhZhfkMSx_DQ"><input name="Input.RememberMe" type="hidden" value="false"></form>
</section>
</div>
<div class="col-md-6 col-md-offset-2">
</div>
</div>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
<p style="float:left;color: white;">© 2020 - Leicestershire Health Informatics Service -</p>
<a style="float:right; margin-right: 10px;" href="/Home/Privacy">Privacy</a>
<a style="float:right;margin-right: 10px;" href="/Home/Information">Info</a>
<a style="float:right;margin-right: 10px;" href="/Home/TermsAndConditions">T&C</a>
</div>
</footer>
</body></html>
Your assistance would be greatly appreciated. Thank you