New Code:
table {
border-radius: 3px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
}
<div class="table-responsive-md">
<table class="table table-striped table-bordered table-hover table-sm text-light">
<caption>The Weekly Task List</caption>
<thead class="thead-dark">
<tr>
<th>#</th>
<th>Date Started</th>
<th>Due Date</th>
<th>Task Description</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<td>1</td>
<td>03/15/2022</td>
<td>03/25/2022</td>
<td>Submit Report</td>
</tr>
<tr class="bg-dark ">
<td>2</td>
<td>03/15/2022</td>
<td>03/25/2022</td>
<td>Prepare Presentation</td>
</tr>
</tbody>
</table>
</div>
I have an issue with setting the right margin for my table. The left margin works fine, but no matter what I try - changing it to margin-right: 50px or 5%, nothing seems to work. Can you please suggest a fix? Thanks!