When I view my website on different phones, the image in my div jumps down and out of its container. It seems to be okay on some devices, but not on the Samsung Galaxy Note 9 for example. Despite trying various solutions to prevent this issue, such as using Bootstrap 4 and media queries, I have been unable to find the correct solution.
View the problematic image here
<section id="showcase" class="">
<div class="primary-overlay text-white">
<div class="container">
<div class="row">
<div class="col-sm-6 text-center">
<h1 class=" display-2 mt-5 pt-5">All companies in one place
</h1>
<div>
<p class="mb-0 lead">For private customers, Kyndia is an app that provides access and information about the companies you interact with, all in one convenient application.</p>
<br>
<p><em>Simply organized and completely free.</em></p>
</div>
<button type="button" class="btn btn-dark">
<i class="fab fa-apple"></i> Get it from Appstore</button>
<a href="#news" class="btn btn-success" role="button"><i class="fas fa-envelope"></i> Subscribe </a>
</div>
<div class="col-sm-6 text-center">
<img src="img/Start.png" alt="" class="img-fluid wow bounceInRight d-sm-block">
<!--d-none och d-lg-block-->
</div>
</div>
</div>
</div>
</section>