I'm encountering a significant issue with my bs4 boxes that I can't seem to resolve. The primary concern is that when the browser size falls between 600-767.98px and 768-991.98px (as per Dreamweaver), the text within the middle three boxes fails to wrap properly, causing it to overflow outside the box. This issue only arises at certain browser sizes, while at others it functions correctly.
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3 alert-banner">
<h1 class="bg-danger text-white mr-md-3 px-md-5 text-center overflow-
hidden">Applications for crew and production staff are up on the information
page</h1>
</div>
<div class="bg-dark">
<div class="container-fluid w-100 overflow-hidden">
<div class="row">
<a class="col-sm bg-dark my-5 ml-3 text-center box-1 mr-sm-3 pt-3 px-3 pt-
md-5 px-md-5" href="Tickets">
<div class="my-3 p-3">
<h2 class="font-weight-bold">Tickets</h2>
<h3>Buy tickets here</h3>
</div>
</a>
<a class="col-sm bg-primary my-5 text-center box-2 pt-3 px-3 pt-md-5 px-
md-5 overflow-hidden "href="for-students">
<div class="my-3 p-3">
<h2 class="font-weight-bold">Information</h2>
<h3>All forms, documents, and important information will be here</h3>
</div>
</a>
<a class="col-sm my-5 mr-3 ml-3 text-center box-3 mr-md-3 pt-3 px-3 pt-md-5 px-md-5" href="#">
<div class="my-3 p-3">
<h2 class="font-weight-bold">Previous Years (coming soon)</h2>
<h3>View photos from previous shows</h3>
</div>
</a>
</div>
<div class="row mx-auto">
<div class="mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden col-sm bg-dark">
<h2 class="display-5">Want to buy an ad on this site to sponsor the play?</h2>
<p class="lead">Email us - <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76060419120315021f191836141b1e051b03051f15171a5815191b">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76060419120315021f191836141b1e051b03051f15171a5815191b">[email protected]</a></a> (Limited quantity available)</p>
</div>
</div>