I've searched through various questions and answers but haven't been able to resolve this issue.
There's a modal on my page that is causing the content to shift slightly to the left.
I've created a sample fiddle, although it doesn't have identical code, the problem persists. Clicking on TEST triggers the modal, which shifts some of the content.
<div class="modal fade" id="modalContactos" tabindex="-1" role="dialog" aria-labelledby="modalContactos1" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalContactos1">Contactos</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<ul class="navbar-nav mr-1">
<a class="navbar-brand head" id="contatoshead" data-toggle="modal" data-target="#modalContactos" data-placement="bottom" data-trigger="hover" title="Contatos" href="#">
TEST
</a>
</ul>
</nav>
<div class="container-fluid">
<div class="row" id="sidebartest1">
<p>
Test
</p>
</div>
</div>
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<p>
TEST
</p>
</main>
View the JSFiddle here for reference
If you have any suggestions on how to fix this issue, I'd greatly appreciate it.
Thank you in advance!