I've been experiencing an issue with the button in my code. It keeps extending outside of the parent div container, regardless of the screen size.
<header class="header">
<div class="hero text-white pt-7">
<div class="container-xl">
<div class="row">
<div class="col-md-6">
<div class="image-container mb-5 px-4">
<img src="images/somephoto.jpeg" alt="" class="img-fluid" />
</div>
</div>
<div class="col-md-6">
<div
class="text-container p-4 d-flex flex-column justify-content-center h-100 mb-5"
>
<h1 class="display-3 fw-bold">Welcom to My Website</h1>
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ex tempora
</p>
<!-- Form -->
<div class="form-container text-center">
<form>
<div class="row my-4">
<input
type="email"
class="form-control form-control-lg rounded-5"
placeholder="Email Address"
/>
</div>
<div class="row d-grid">
<button class="btn btn-primary btn-lg text-white">Click Here</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
I've experimented with various alignment classes, but haven't found a solution yet.