bootstrap grid doesn't align the same way as a <table> - html

Question

I'm trying to convert from table to bootstrap grid for mobile comparability. Below is an image of both of them on one page but even though they both follow the same css, bootstrap isn't at the center unlike table is. Can someone please explain this to me because this makes no sense.
Thank you
table is at the top and Bootstrap is at the bottom
and here's my HTML
.platinum2 {
color: #FFFFFF;
font-size: 30px;
font-weight: 600;
line-height: 41px;
text-align: center;
}
.package_text {
color: #FFFFFF;
font-family: "lato";
font-size: 14px;
font-weight: 500;
line-height: 26px;
}
.package_price {
color: #FFFFFF;
font-family: "lato";
font-size: 16px;
font-weight: bold;
line-height: 14px;
text-align: center;
}
.glyphicon-star{
font-size: 20px;
}
<div class="row" style="width:50%;margin-left:25% ; margin-bottom:25px; text-align:center">
<h1 class="platinum2">Platinum <br><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /> </h1>
<div class="col-md-6" >
<span class="package_text">Hand Wash<br>Full Interior<br>Complete Vacuum<br>Leather Clean+Shine<br>
<br />
Tire Dressing<br>Tire and Rim Detailing<br>Engine Shampoo<br />
<br /></span>
<span class="package_price"> Cars: $189</span>
</div>
<div class="col-md-6">
<span class="package_text">Roof Liner<br>Full Body Wax<br>Clay Bar Treatment<br>Interior Shampooing<br />
<br />
Complete Detail<br>In & Out Windows<br>Door Jam Cleaning<br />
<br /></span>
<span class="package_price">SUVs: $199</span>
</div>
</div>
</div>
<div class="container" style="background-image:url('/images/StripedBGDetailPackages.png' ); align-items:center; text-align:center; margin-top:25px; padding-top:25px; background-size:100%" >
<table style="width:50%;margin-left:25% ; margin-right:25%; margin-bottom:25px;">
<tr>
<td class="platinum2">Gold</td>
<td class="platinum2">Silver</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
</tr>
<tr>
<td class="package_text">Hand Wash</td>
<td class="package_text">Hand Wash</td>
</tr>
<tr>
<td class="package_text">Complete Vacuum</td>
<td class="package_text">Clay Bar Treatment</td>
</tr>
<tr>
<td class="package_text">Interior Shampooing</td>
<td class="package_text">Complete Body Wax</td>
</tr>
<tr>
<td class="package_text">Leather Clean+Shine</td>
<td class="package_text">Tire and Rim</td>
</tr>
<tr>
<td class="package_text">Complete Deetail</td>
<td class="package_text">Detailing</td>
</tr>
<tr>
<td class="package_text">In & Out Windows</td>
<td class="package_text">Tire Dressing</td>
</tr>
<tr class="package_text">
<td> </td>
<td> </td>
</tr>
<tr>
<td class="package_price">Cars:$119 SUVs:$129</td>
<td class="package_price">Cars:$99 SUVs:$109</td>
</tr>
</table>
<div class="row" style="width:50%;margin-left:25% ; margin-right:25%; margin-bottom:25px;">
<div class="col-md-6">
<table>
<tr>
<td class="platinum2">Gold</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
</tr>
<tr>
<td class="package_text">Hand Wash</td>
</tr>
<tr>
<td class="package_text">Complete Vacuum</td>
</tr>
<tr>
<td class="package_text">Interior Shampooing</td>
</tr>
<tr>
<td class="package_text">Leather Clean+Shine</td>
</tr>
<tr>
<td class="package_text">Complete Deetail</td>
</tr>
<tr>
<td class="package_text">In & Out Windows</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="package_price">Cars:$119 SUVs:$129</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table>
<tr>
<td class="platinum2">Silver</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
</tr>
<tr>
<td class="package_text">Hand Wash</td>
</tr>
<tr>
<td class="package_text">Clay Bar Treatment</td>
</tr>
<tr>
<td class="package_text">Complete Body Wax</td>
</tr>
<tr><td class="package_text">Tire and Rim</td></tr>
<tr><td class="package_text">Detailing</td></tr>
<tr><td class="package_text">Tire Dressing</td></tr>
<tr><td> </td></tr>
<tr><td class="package_price">Cars:$99 SUVs:$109</td></tr>
</table>
</div>
</div>

Answer 1

To debug, first I added the following since your text are white, and border to everything with 1px solid red color, by doing this it is very easy to see why it is not centered! check the link
body {
background-color: gray;
}
* {
border: 1px solid red;
}
https://jsfiddle.net/dalinhuang/aLpv8k3f/4/
Now, as you can see Gold BS it is in the correct position, that's because
you need only add the following class to your <table class="fullwidth">
.fullwidth {
width: 100%;
}
OK, full solution, remove the debug stuff we added:
https://jsfiddle.net/dalinhuang/aLpv8k3f/5/
Also I think your star are not in the same line, update your .glyphicon-star to add this margin-top: -1px;.
.glyphicon-star {
font-size: 20px;
margin-top: -1px;
}