Like I said in the title. I want the row to have the same spacing like the container. I am using Bootstrap 5. So if you preview the HTML in Stackoverflow it won’t show you the way I see it. I added a picture, so you can understand it better.
<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">Erstelle einen neuen Kunden</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="Vorname *" value="" #firstName />
</div>
<div class="col-6">
<input type="text" name="txtName" class="form-control border-dark" placeholder="Nachname *" 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="Telefonnummer *" value="" #phoneNumber/>
</div>
</div>
<div class="col-xl-6">
<div>
<textarea name="txtMsg" class="form-control border-dark" placeholder="Beschreibung" 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="Speichern" style="background-color: beige;"/>
</div>
</div>
</div>
>Solution :
Simply wrap a div.container around your div.row to apply the .container styles to it.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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">Erstelle einen neuen Kunden</div>
</div>
<hr>
</div>
<div class="container">
<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="Vorname *"
value="" #firstName />
</div>
<div class="col-6">
<input type="text" name="txtName" class="form-control border-dark" placeholder="Nachname *"
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="Telefonnummer *"
value="" #phoneNumber />
</div>
</div>
<div class="col-xl-6">
<div>
<textarea name="txtMsg" class="form-control border-dark" placeholder="Beschreibung"
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="Speichern"
style="background-color: beige;" />
</div>
</div>
</div>
</div>