Clash Royale CLAN TAG

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">&times;</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.