Проблема с центрирующими колонками в этом нижнем колонтитуле

Question

Я использую bootstrap, и у меня есть этот нижний колонтитул, который составляет 4 столбца. Я установил текстовый центр, который помещает все в центр столбца, но центр оправдывает все, что делает его странным. Я хотел бы, чтобы все было по центру в их столбцах, но также оставлялось оправданным, если это невозможно, будут приветствоваться любые предложения о том, как сделать этот вид лучше. он должен оставаться в 4 столбцах.

вот мой кодовый блок https://codepen.io/RobotHead/pen/MWYZBwm

вот код:

<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>
                        <a href="mailto:my@email.com">MyEmail</a>
                    </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>
                            <a href="/" target="/">About Us</a>
                        </li>
                        <li>
                            <a href="/" target="/">Company Policy</a>
                        </li>
                        <li>
                            <a href="/" target="/">Privacy Policy</a>
                        </li>
                        <li>
                            <a href="/" target="/">About Us</a>
                        </li>
                        <li>
                            <a href="/" target="/">Company Policy</a>
                        </li>
                        <li>
                            <a href="/" target="/">Privacy Policy</a>
                        </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

добавить этот стиль:

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

Answer 2

Вы можете использовать этот стиль для block-center класса:

.block-center{
  text-align:left !important;
  display: inline-block;
}