Created table, but headers and data are not evenly spaced - html

Question

I am creating a credit card form in HTML and CSS. Everything is good so far, except the top portion where I display what is in the "Cart". I created a table so that the info can be evenly displayed. However, if you run the snippet, you can see that the table headers and data are not evenly spaced out. Can someone tell me what I am doing wrong? I tried using margin-left in the and class, but it does not work, it won't even shift to the left.
body {
font-family: Arial;
font-size: 17px;
padding: 8px;
}
* {
box-sizing: border-box;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
.col-75 {
-ms-flex: 75%; /* IE10 */
flex: 75%;
}
.col-25,
.col-50,
.col-75 {
padding: 0 16px;
}
.container {
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
}
input[type=text] {
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
margin-bottom: 10px;
display: block;
}
.icon-container {
margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
}
.btn:hover {
background-color: #45a049;
}
a {
color: #2196F3;
}
hr {
border: 1px solid lightgrey;
}
span.price {
float: right;
color: grey;
}
<div class="row">
<div class="col-25">
<div class="container">
<h4>Cart</h4>
<table>
<tr>
<th>Company</th>
<th >Plan</th>
<th>Packages</th>
<th>Price/pckg</th>
<th>total</th>
</tr>
<tr>
<td>Joes Pizza</td>
<td>Premium</td>
<td>10,000</td>
<td>$0.039</td>
<td>390.00</td>
</tr>
</table>
<hr>
<p>Total <span class="price" style="color:black"><b>$390.00</b></span></p>
</div>
</div>
<div class="col-75">
<div class="container">
<form>
<div class="row">
<div class="col-50">
<h3>Billing Information</h3>
<label for="fname"><i class="fa fa-user"></i> Company Name</label>
<input type="text" id="fname" name="firstname">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city">
<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip">
</div>
</div>
</div>
<div class="col-50">
<h3>Payment</h3>
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth">
<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-50">
<label for="ccnum">Bank Account</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
<div class="col-50">
<label for="ccnum">Routing Number</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
</div>
<input type="submit" value="Submit payment" class="btn">
</form>
</div>
</div>
</div>

Answer 1

The tables headers and the table data in your code are equally spaced but they do not look so because they are center-aligned. I have aligned td and th to left and gave padding for a better appearance and also gave the same widths to each th (no need to set widths in td if set in th).
Thanks
table tr th,
table tr td {
text-align: left;
padding: 2px 2px;
border: 1px solid black;
}
<div class="row">
<div class="col-25">
<div class="container">
<h4>Cart</h4>
<table>
<tr>
<th width="20%">Company</th>
<th width="20%">Plan</th>
<th width="20%">Packages</th>
<th width="20%">Price/pckg</th>
<th>total</th>
</tr>
<tr>
<td>Joes Pizza</td>
<td>Premium</td>
<td>10,000</td>
<td>$0.039</td>
<td>390.00</td>
</tr>
</table>
<hr>
<p>Total <span class="price" style="color:black"><b>$390.00</b></span></p>
</div>
</div>