Bootstrap table one column exiled way over to the left - html

Question

I wanted to add an icon with a tooltip to a bootstrap table and wow I have failed miserably. it seems to be aligning the flair way over on the left and I would like it to be closer to the thing that the icon/tooltip refers to.
So if you look at this link:
JSFIDDLE
You should notice that no matter how big the table is, the "CPU" column is pushing the column to the left of it all the way over to the left margin of the table.
(this is an image of what it looks like when font awesome actually works)...The image shows the insane gap between the 'flair' and the CPU description. Does anyone know why it is giving the CPU column such an insane berth?
enter link description here
.product-table {
margin-top: 50px;
th {
color: $dark-gray;
padding: 20px 7px;
i {
color: $green;
font-size: 26px;
}
}
a {
color: $text;
&:hover {
color: $green;
text-decoration: none;
}
}
.product-table-body {
border: 1px solid $lightest-gray;
td {
padding: 15px 7px;
}
tr:nth-child(2n+1) {
background-color: $lightest-gray;
}
}
}
<section>
<h2 class="text-center">Things and Stuff</h2>
<div class="table-responsive">
<table class="w-100 text-center product-table">
<tr>
<th></th>
<th><i class="fal fa-microchip"></i><br>CPU</th>
<th><i class="fal fa-database"></i><br>Storage</th>
<th><i class="fal fa-memory"></i><br>RAM</th>
<th><i class="fal fa-desktop"></i><br>IPs</th>
<th><i class="fal fa-tachometer-alt-fast"></i><br>Bandwidth</th>
<th><i class="fal fa-hand-holding-usd"></i><br>Monthly</th>
<th></th>
</tr>
<tr>
<td>
<span style="color: #6e9c23;">
<i class="fal fa-fire fa-2x" data-toggle="tooltip" data-placement="left" title="Recommended"></i>
</span>
</td>
<td>Xeon E3-1245v5 (4x3.5GHz)</td>
<td>1x1TB</td>
<td>16GB</td>
<td>5</td>
<td>10000GB</td>
<td>$89</td>
<td><div class="d-inline-block"><i class="fas fa-chevron-right"></i></div></td>
</tr>
</table>
</div>
</section>

Answer 1

It looks like your column's width is set at a certain percentage of the table. Since the table takes up a percentage of the screen, the column's size can be different on larger/smaller screens. I'd recommend setting a width value for the table so it's the same size on different screens.
Hope this helps.