As mentioned in the title, I am looking to ensure that the rows have the same spacing as the container. I am currently using Bootstrap 5, so when you preview the HTML on Stack Overflow, it may not appear exactly as intended. To provide a clearer understanding, I have included an image.
<div class="container position-absolute top-50 start-50 translate-middle">
<div class="container pt-5">
<div class="h-100 p-5 rounded" style="background-color: beige;">
<div class="display-4 text-center">Create a New Customer</div>
</div>
<hr>
</div>
<div class="row">
<div class="col-xl-6">
<div class="row mb-3">
<div class="col-6">
<input type="text" name="txtName" class="form-control border-dark" placeholder="First Name *" value="" #firstName />
</div>
<div class="col-6">
<input type="text" name="txtName" class="form-control border-dark" placeholder="Last Name *" value="" #familyName/>
</div>
</div>
<div class="mb-3">
<input type="text" name="txtEmail" class="form-control border-dark" placeholder="Email *" value="" #email/>
</div>
<div class="mb-3">
<input type="text" name="txtPhone" class="form-control border-dark" placeholder="Phone Number *" value="" #phoneNumber/>
</div>
</div>
<div class="col-xl-6">
<div>
<textarea name="txtMsg" class="form-control border-dark" placeholder="Description" style="width: 100%; height: 150px;" #description></textarea>
</div>
</div>
<div class="text-center mt-3">
<input type="submit" name="btnSubmit" class="btn border-dark" value="Save" style="background-color: beige;"/>
</div>
</div>
</div>