I'm facing an issue with the navigation bar elements in my header. They are currently aligned to the left side of the screen, but I want them to move to the right. Does anyone know why they are not moving? Also, is there a specific rule or method for positioning elements on a webpage? I thought it would be straightforward to specify where I wanted them to be, but it seems like that's not the case.
Here is the HTML code:
<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">
<a href="#" class="nav-link bold">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link bold">Register</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle bold" id="navbardrop" data-toggle="dropdown">Login</a>
<!--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 Button-->
<button type="submit class=btn btn-primary">Log In</button>
</form>
</div>
</li>
</ul>
</nav>
</header>
</div>
</div>
And here is the CSS 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{
background:#2A2A36;
}