Ширина бутстрапа переполняется и не подходит для формы содержимого

У меня есть несколько форм на веб-странице (с использованием Bootstrap 4), и все они имеют некоторое переполнение содержимого. Я не могу понять, как это исправить и сделать ширину в соответствии с содержимым формы. Здесь — скриншот одной из более простых форм. Это еще один скриншот других форм, если это поможет. Ниже приведен некоторый мой код.

страница.html

<div class = "admin_section">
    <h3>Removals</h3>

    <div class = "admin_section_content container">
        <form method = "post">
            <div class = "form-group row">
                <label for = "deleteName" class = "col-sm-2 col-form-label">Remove a Menu Item</label>
                <div class = "col-sm-2">
                    <input type = "text" name = "remove_item_name" pattern = "^[a-zA-ZÀ-ÿ-' ]+$" maxlength = "25"
                        class = "form-control" id = "deleteName" placeholder = "Food Item Name" required>
                </div>
            </div>

            <div class = "form-group row">
                <label for = "removeItem" class = "col-sm-2 col-form-label"></label>
                <div class = "col-sm-2 text-right">
                    <button type = "submit" class = "btn btn-danger" id = "removeItem" name = "remove_item_button"
                        value = "clicked">Remove Item</button>
                </div>
            </div>
        </form>

        <br><br>

        <form method = "post">
            <div class = "form-group row">
                <label for = "deleteReceipt" class = "col-sm-2 col-form-label">Refund a Receipt</label>
                <div class = "col-sm-2">
                    <input type = "text" name = "remove_receipt_number" pattern = "^\d{10}$" minlength = "10" maxlength = "10"
                        class = "form-control" id = "deleteReceipt" placeholder = "Receipt Number" required>
                </div>
            </div>

            <div class = "form-group row">
                <label for = "removeReceipt" class = "col-sm-2 col-form-label"></label>
                <div class = "col-sm-2 text-right">
                    <button type = "submit" class = "btn btn-danger" id = "removeReceipt" name = "remove_receipt_button"
                        value = "clicked">Refund Receipt</button>
                </div>
            </div>
        </form>
    </div>
</div>

общий.css

.admin_section{
    margin-bottom: 1.5rem;
    margin-left: 35%;
    margin-right: auto;
}

.admin_section_content{
    font-family: 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-left: 2rem;
}

select{
    border-color: var(--bootstrap-grey);
    border-radius: 5px;
}

form{
    background-color: var(--form-grey);
    border-radius: 5px;
    padding: 15px;
}

body{
    overflow-x: hidden;
}