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

Question

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

Answer 1

Thanks for the extra information Yariel. See what happens if you put the form inside a column.
<div class="col-sm-12 col-md-6">
<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>
</div>
```