My form contains multiple input buttons, however, the inputs are not centered on the page. Currently, they are displayed in a single row within the div. I would like them to fill the page width with a 20px margin on each side and adjust to the browser screen size. How can I achieve this? Thank you for your assistance!
.main_buttons {
width: 100%;
text-align: center;
}
.btn-select {
margin: 4px;
background-color: #7a7979;
border-radius: 4px;
overflow: auto;
width: 250px;
height: 200px;
margin-right: 5px;
}<div class="container main_buttons">
<div class="row">
<div class="col-12">
<form class="select_form" method="POST">
{% csrf_token %}
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="0"><span>sydney</span></input>
</label>
</div>
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="1"><span>tokyo</span></input>
</label>
</div>
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="2"><span>london</span></input>
</label>
</div>
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="3"><span>new york</span></input>
</label>
</div>
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="4"><span>paris</span></input>
</label>
</div>
<div class="btn-select">
<label>
<input type="checkbox" name="city_select" value="5"><span>madrid</span></input>
</label>
</div>
<button type="submit" class="btn btn-secondary city_submit_button">SUBMIT</button>
</form>
</div>
</div>
</div