Move search bar to right hand side of navbar - html

Question

I'm struggling to move my search bar to far right of my navbar. I have reviewed other questions but not fixes seem to work for me.
Some help identifying why would be great.
navbar html
<nav class="navbar navbar-expand-lg fixed-top">
<div class="nav-container">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="{% url 'home' %}"
>Home</a
>
<a class="nav-link" href="{% url 'gallery' %}">Gallery</a>
<a class="navbar-name" href="{% url 'home' %}">MARTIN HENSON PHOTOGRAPHY</a>
<a class="nav-link" href="{% url 'blog' %}">Blog</a>
<a class="nav-link" id="contact-nav-link" href="{% url 'contact' %}">Contact</a>
<form class="d-flex" method="POST" action="{% url 'searchblogs' %}">
{% csrf_token %}
<i class="fa fa-search"></i>
<input type="text" class="form-control rounded-0" placeholder="Search keyword" name="searched">
<button id="search-button" class="btn btn-primary-outline rounded-0">Search</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</div>
</nav>
navbar css
.navbar {
background: black;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) !important;
text-align: center;
width: 100%;
}
.nav-container {
display: inline-block;
margin: 0 auto;
}
.navbar .navbar-nav {
padding: 50px;
}
.navbar-name {
text-decoration: none;
color: white;
margin-left: 50px;
margin-right: 50px;
}

Answer 1

I don't see any styles for navbar-nav. It is a problem, because in row are just inline elements a that's why is form under it. You need to add d-flex.
<div class="navbar-nav d-flex">
and use something for justify elements for spacings see https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Answer 2

That's an easy fix. Just add a float right CSS to your search bar:
.navbar {
background: black;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) !important;
text-align: center;
width: 100%;
}
.nav-container {
display: inline-block;
margin: 0 auto;
}
.navbar .navbar-nav {
padding: 50px;
}
.navbar-name {
text-decoration: none;
color: white;
margin-left: 50px;
margin-right: 50px;
}
.d-flex {
float:right;
}
<nav class="navbar navbar-expand-lg fixed-top">
<div class="nav-container">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="{% url 'home' %}"
>Home</a
>
<a class="nav-link" href="{% url 'gallery' %}">Gallery</a>
<a class="navbar-name" href="{% url 'home' %}">MARTIN HENSON PHOTOGRAPHY</a>
<a class="nav-link" href="{% url 'blog' %}">Blog</a>
<a class="nav-link" id="contact-nav-link" href="{% url 'contact' %}">Contact</a>
<form class="d-flex" method="POST" action="{% url 'searchblogs' %}">
{% csrf_token %}
<i class="fa fa-search"></i>
<input type="text" class="form-control rounded-0" placeholder="Search keyword" name="searched">
<button id="search-button" class="btn btn-primary-outline rounded-0">Search</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</div>
</nav>
**If you run the snippet, make sure you click "full page" to see the effect.