Horizontal align div in Bootstrap grid?

Question

css

Hello everyone, I tried several options - none of them help. So there are four blocks inside .container and .row . They need to be centered. Since the grid is fluid, I would not want to use margin-left for the first block, it would be much nicer if the blocks would be centered according to the principle margin: 0 auto; , but the catch is that you can't center it that way. Is it possible to achieve automatic centering in this case and how?

<div class="container numerals">
            <div class="row">
                <div class="col-md-3 digit">
                    <div class="text-uppercase">Наши<br>награды</div><br>
                <strong>54</strong>
                </div>
                <div class="col-md-3 digit">
                    <div class="text-uppercase">Готовых<br>проектов</div><br>
                <strong>1054</strong>
                </div>
                <div class="col-md-3 digit">
                    <div class="text-uppercase">Счастливых<br>клиентов</div><br>
                <strong>120</strong>
                </div>
                <div class="col-md-3 digit">
                    <div class="text-uppercase">Упоминаний<br> в прессе</div><br>
                <strong>54</strong>
                </div>
            </div>
        </div>

CSS (also this option does not work)
.numerals {
margin-top: 20px;
text-align: center;
}
.digit {
display: inline-block;
width: 20%
padding-top: 50px;
margin-bottom: 50px;
}

Answer 1

Add

.digit
{
    float: none;
}

by default all columns are float: left; and you will be happy

Answer 2

This is how it works

.digit{
  text-align: center;
}