https://i.sstatic.net/SvTiG.jpg
This is the code for my navbar customization:
<nav class="navbar navbar-dark navbar-expand-sm fixed-top navbar-custom" id="header-nav">
<div class="container">
<div class="row">
<div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-4 col-sm-2">
<a class="navbar-brand mr-auto" href="./index.html"><h2 class="tagline">Subh</h2></a>
</div>
<div class="expand-navbar-collapse col-sm-6" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="./index.html"><span class="fa fa-home fa-lg"></span> Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span>Menu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-user fa-lg"></span> Login</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-cart-plus fa-lg"></i> Cart</a></li>
</ul>
</div>
<div class="col-5 col-sm-4 ml-auto">
<ul class="navbar-nav">
<li class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-search fa-lg"></i></span>
<input class="form-control" type="text" placeholder="Search">
</li>
</ul>
</div>
</div>
</nav>
Looking at the image, you can see the vacant space that I am trying to modify. The search bar is currently centered, but I would like to push it to the right without it going to the next line when I adjust the column width. How can I achieve this? The other columns are indicated by a white border.