Here is the HTML template that I am working with:
<div class='row'>
<div class='col-md-6'>
<div class='card mx-auto'>
<div id='main'>
{% for candidate in candidates %}
<div class='w-75 card mx-auto'>
<p class='align-bottom'><strong>{{candidate.UserID.get_full_name}}</strong><input type="number" class='float-right'></p>
</div>
{% endfor %}
</div>
<br>
<button id='send' type="submit" class='btn btn-outline-dark mx-auto'>Submit</button>
</div>
</div>
<div class='col-md-6'>
{% include 'ballot_info.html' %}
</div>
</div>
I am trying to create some margin around the card so it isn't right against the side of the page. Is there a way to achieve this using Bootstrap without resorting to regular CSS?