Spacing of container (title) is not the same as row (form) with Bootstrap 5

Issue

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>

Answered By - David Wolf