Header elements not positioning right in css - html

Question

I currently have navigation bar elements in my header. All I want is for them to move to the right side of the screen because they are on the left right now. Anybody know why they won't move? Also is there some rule to positioning elements? I thought it would be as simple as telling them where I wanted them to go but apparently that's not the case.
html:
<div class="row">
<div class="col">
<!--Navigation bar-->
<header class="container-fluid">
<nav class="nav navbar-expand-sm">
<!--Search form-->
<div class="searchForm">
<form class="form-inline" action="">
<input type="text" name="search" class="form-control mr-sm-2" placeholder="Search">
</form>
</div>
<!--Navigation bar links-->
<ul class="navbar-nav">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Register
</li>
<li class="nav-item dropdown">
Login
<!--Login dropdown form-->
<div class="dropdown-menu dropdown-menu-right">
<h3 class="dropdown-header">Log In</h3>
<form action="">
<div class="form-group loginInput">
<input type="email" name="email" id="email" class="form-control" placeholder="Email Address">
</div>
<div class="form-group loginInput">
<input type="password" name="password" class="form-control" id="password" placeholder="Password">
</div>
<!--Login Buttton-->
<button type="submit class=btn btn-primary">Log In</button>
</form>
</div>
</li>
</ul>
</nav>
</header>
</div>
</div>
CSS:
body{
background: #ecf0f1;
font-family: 'Open Sans', sans-serif;
}
header{
background-color: #2A2A36;
}
.bold{
font-weight: bold;
}
.loginInput input{
margin: 0 auto;
width: 150px
}
.dropdown-menu{
width: 200px;
height: 220px;
background:#1F2021;
opacity: 0.9;
}
.navbar-nav .nav-link{
color: #ecf0f1;
text-align: right;
}
.navbar-nav .nav-link:hover{
background:#d35400;
}
form{
margin: 0 auto;
}
.searchForm form{
height: 0px;
display: block;
}
*{
padding: 0;
margin: 0;
}
.navbar-nav .nav-item{
border-right: 1px solid #FFF;
}
.navbar-nav{
background:#2A2A36;
}

Answer 1

To position elements on the right you need to add this to your CSS code for class navbar-nav:
.navbar-nav
{
position:relative; // positioning relative to parent
float:right; // float right inside it's parent
list-style-type:none; // this is to remove the list dots (bullets)
background:#2A2A36;
}
Note: Your <form> and it's container div have 0px height. In case you didn't want that add a <br style="clear:both;" /> after the </form> tag in <div class="searchForm">. Although I see the height:0 in your CSS so that might be on purpose.
Here is the code:
body{
background: #ecf0f1;
font-family: 'Open Sans', sans-serif;
}
header{
background-color: #2A2A36;
}
.bold{
font-weight: bold;
}
.loginInput input{
margin: 0 auto;
width: 150px
}
.dropdown-menu{
width: 200px;
height: 220px;
background:#1F2021;
opacity: 0.9;
}
.navbar-nav .nav-link{
color: #ecf0f1;
text-align: right;
}
.navbar-nav .nav-link:hover{
background:#d35400;
}
form{
margin: 0 auto;
}
.searchForm form{
height: 0px;
display: block;
}
*{
padding: 0;
margin: 0;
}
.navbar-nav .nav-item{
border-right: 1px solid #FFF;
}
.navbar-nav
{
position:relative;
float:right;
list-style-type:none;
background:#2A2A36;
}
<div class="row">
<div class="col">
<!--Navigation bar-->
<header class="container-fluid">
<nav class="nav navbar-expand-sm">
<!--Search form-->
<div class="searchForm">
<form class="form-inline" action="">
<input type="text" name="search" class="form-control mr-sm-2" placeholder="Search">
</form>
</div>
<!--Navigation bar links-->
<ul class="navbar-nav">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Register
</li>
<li class="nav-item dropdown">
Login
<!--Login dropdown form-->
<div class="dropdown-menu dropdown-menu-right">
<h3 class="dropdown-header">Log In</h3>
<form action="">
<div class="form-group loginInput">
<input type="email" name="email" id="email" class="form-control" placeholder="Email Address">
</div>
<div class="form-group loginInput">
<input type="password" name="password" class="form-control" id="password" placeholder="Password">
</div>
<!--Login Buttton-->
<button type="submit class=btn btn-primary">Log In</button>
</form>
</div>
</li>
</ul>
</nav>
</header>
</div>
</div>

Answer 2

You have to apply the effect to parent element of the elements you want them to move.
.nav{text-align:right;}

Answer 3

Instead of positioning with text-align: right; I would do this: position: relative; right: 5%; transform: translate(-50%); You can change "right" value depending in what you need. You can use both but always define in parent, in this case .nav{} . So you can use this:
.nav{
position: relative;
right: 5%;
transform: translate(-50%);
}
or this:
.nav{
text-align: right;
}
First one is better if you'll put images and is also responsive :)

Answer 4

The answer I found was to use ml-auto on the navbar.
html:
<nav class="nav navbar-expand-sm">
<!--Search form-->
<div class="searchForm">
<form class="form-inline" action="">
<input type="text" name="search" class="form-control mr-sm-2" placeholder="Search">
</form>
</div>
<!--Navigation bar links-->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Register
</li>
<li class="nav-item dropdown">
Login
<!--Login dropdown form-->
<div class="dropdown-menu dropdown-menu-right">
<h3 class="dropdown-header">Log In</h3>
<form action="">
<div class="form-group loginInput">
<input type="email" name="email" id="email" class="form-control" placeholder="Email Address">
</div>
<div class="form-group loginInput">
<input type="password" name="password" class="form-control" id="password" placeholder="Password">
</div>
<!--Login Buttton-->
<button type="submit class=btn btn-primary">Log In</button>
</form>
</div>
</li>
</ul>
</nav>