I'm facing an issue with content overflow on multiple forms within a webpage that uses Bootstrap 4. I can't seem to find a solution to make the width of the forms fit the content properly. Take a look at this picture showing one of the simpler forms, and another image here showcasing other forms for reference. Below is a snippet of my code:
In 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>
In 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;
}