I'm encountering a strange issue with my table alignment on Internet Explorer. The table is offset to the right in IE, but perfectly centered in other browsers like Edge, Firefox, and mobile browsers. I am using Bootstrap for my design, but haven't been able to pinpoint what exactly is causing this misalignment specifically on IE.
<div class="container body-content body-padding">
<div class="row">
<div class="col-auto">
<p class="breadcrumbs">
<a href="index.html" class="">Home</a> /
<a href="#" class="">Services</a> /
<a href="#" class="">Rates</a>
</p>
</div>
</div>
<div class="row row-spacing-reduced">
<div class="col">
<hr>
</div>
</div>
<div class="row">
<div class="col text-center">
<h1 class="spage-header mt-5">Rates</h1>
</div>
</div>
<div class="row mt-5 justify-content-center">
<div class="col rates-col">
<table class="table table-striped">
<thead>
<tr class="table-info">
<th scope="col">Service</th>
<th scope="col">Charge</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lots of rows</td>
<td>Condensed version</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row justify-content-center">
<div class="col rates-col">
<p class="spage-text no-padding">....</p>
<p class="spage-text mb-5">....</p>
<h3 class="spage-subheader no-padding">Our Guarantee</h3>
<p class="spage-text no-padding">...</p>
</div>
</div>
</div>