Bootstrap width is overflowing and not fitting to form content-CodePudding

I have several forms on a webpage (utilizing Bootstrap 4) and all of them have some content overflow. I can't figure out how to fix it and make the width to fit the form content. Here is a screenshot of one of the simpler forms. This is another screenshot of the other forms in case it helps. Below is some of my code.

page.html

<div >
    <h3>Removals</h3>

    <div >
        <form method="post">
            <div >
                <label for="deleteName" >Remove a Menu Item</label>
                <div >
                    <input type="text" name="remove_item_name" pattern="^[a-zA-ZÀ-ÿ-' ] $" maxlength="25"
                         id="deleteName" placeholder="Food Item Name" required>
                </div>
            </div>

            <div >
                <label for="removeItem" ></label>
                <div >
                    <button type="submit"  id="removeItem" name="remove_item_button"
                        value="clicked">Remove Item</button>
                </div>
            </div>
        </form>

        <br><br>

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

            <div >
                <label for="removeReceipt" ></label>
                <div >
                    <button type="submit"  id="removeReceipt" name="remove_receipt_button"
                        value="clicked">Refund Receipt</button>
                </div>
            </div>
        </form>
    </div>
</div>

general.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;
}

CodePudding user response：

Thanks for the extra information Yariel. See what happens if you put the form inside a column.

<div >

        <form method="post">
            <div >
                <label for="deleteName" >Remove a Menu Item</label>
                <div >
                    <input type="text" name="remove_item_name" pattern="^[a-zA-ZÀ-ÿ-' ] $" maxlength="25"
                         id="deleteName" placeholder="Food Item Name" required>
                </div>
            </div>

            <div >
                <label for="removeItem" ></label>
                <div >
                    <button type="submit"  id="removeItem" name="remove_item_button"
                        value="clicked">Remove Item</button>
                </div>
            </div>
        </form>

</div>

```