Trouble with centering columns in this footer - html

Question

I'm using bootstrap and I have this footer that is 4 columns. I have it set to text-center which places everything in the center of the column, but also center justifies everything making it look weird. I would like to keep everything centered in their columns but also left justified, if this isn't possible any suggestions on how to make this look better would be appreciated. it needs to stay 4 columns though.
here is my codepen
https://codepen.io/RobotHead/pen/MWYZBwm
here is the code:
<div class="Layout">
<div>
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-3 footer-column">
<div class="h3 m-20 no-m-lr">Contact Us</div>
<div class="block-center">
<p>MySite</p>
<p class="block">123xyz st</p>
<p class="block">Suite 7</p>
<p class="block">Marklar, Mr 555555</p>
<p>555-555-5555</p>
<p>
MyEmail
</p>
</div>
</div>
<!-- /Column -->
<div class="col-xs-12 col-sm-6 col-md-3 footer-column">
<div class="block-center">
<h3> Company Information
</h3>
<ul>
<li>
About Us
</li>
<li>
Company Policy
</li>
<li>
Privacy Policy
</li>
<li>
About Us
</li>
<li>
Company Policy
</li>
<li>
Privacy Policy
</li>
</ul>
</div>
</div>
<!-- /Column -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="block-center">
<h3> Get The Latest Deals
</h3>
<p class="mail-text saleprice">Sign up today for our latest deals!</p>
<p>Sign up here: <input type="text"> </p>
<p>Join our savings club</p>
</div>
</div>
<!-- /Column -->
<div class="col-xs-12 col-sm-6 col-md-3 footer-column">
<div class="block-center">
<h3>We Accept</h3>
<p>Accepted Credit Cards</p>
<p>Amex</p>
<p>Discover</p>
<p>Mastercard</p>
<p>Visa</p>
<div class="paypal-logo">
<br>
<table border="0" cellpadding="10" cellspacing="0" align="center">
<tbody>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<a href="https://www.paypal.com/webapps/mpp/paypal-popup" title="How PayPal Works" onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;">
<img src="https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/logo-center/12_bdg_payments_by_pp_2line.png" alt="Secured by PayPal" data-image="vrtk4rr60c81">
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /Column -->
</div>
</div>
</div>

Answer 1

add this style:
.block-center {
text-align: left;
margin: auto;
display: inline-block;
}