Bootstrap 4 modal pop up header login stretch to the right

Multi tool use


Bootstrap 4 modal pop up header login stretch to the right
My bootstrap 4 login pop up on the header stretch all the way to the right when clicked.
My header
The header when I clicked the login pop up
Here's my link code:
<li class="nav-item">
<a class="nav-link btn btn-outline-info px-4 mt-1" data-toggle="modal" data-target="#loginModal1">Login</a>
</li>
Here's my modal code:
<div class="modal fade" role="dialog" id="loginModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Modal Login Form</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" name="" class="form-control" placeholder="Password">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-warning">Sign in</button>
</div>
</div>
</div>
</div>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.