White line when finish class col bootstrap - html

Question

I'm using Bootstrap 4.1 and bootstrap4-fullscreen-modal (https://github.com/basilebong/bootstrap4-fullscreen-modal).
I have written a html page with bootstrap and the browser shows it very well.
But when I import this page on the bootstrap4-fullscreen-modal using
$("#idCl").load("page.html");
the modal properly works but I see this:.
The page is composed in this way:
<div class="container-fluid"> <!-- Main container -->
<div class="row">
<div class="col-sm-5">
</div>
<div class="col-sm-2" id="id1">
</div>
<!-- Here there is the problem -->
<div class="col-sm-5" id="id2">
</div>
</div>
</div>
The problem is when the id1 div finishes and start with id2 div.
In addition, I have noted this: on chrome there is this problem, on safari the problem doesn't appear.
Have you a solution?
I have tried to zoom or reduce zoom but I see the white line only when I'm on "normal view" (100%).
The modal code is:
<div class="modal fade modal-fullscreen force-fullscreen" id="idClxViewCardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div id="idCl">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->