Шрифт потрясающий центр по горизонтали

Поэтому по какой-то причине я просто не могу поместить свои значки в центр div, в который они были завернуты. Я попробовал обернуть их в div, вызвав их непосредственно в css, много css-комбинаций и родительских классов, которые он просто не сдвинет с места, Единственный способ заставить меня двигаться, добавив "margin-left", который просто невелик в этой отзывчивой дизайнерской ситуации.

Вот мой html:

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
    <i class="icon-code"> </i>
    <p class="service-description">
        Bacon ipsum dolor sit amet ribeye ham kielbasa, pork ball tip jowl pancetta kevin andouille capicola pastrami frankfurter short ribs tenderloin pork chop.
    </p>
</div>

Вот мой CSS:

.service-icons{
    margin-top:6%;
}
.service-icons i{
    text-align: center;
    vertical-align: middle;
    font-color:#c1c1c1;
    color:#c1c1c1;
    font-size:72px;
    transition: all 0.3s ease-in-out 0s;
}
.icon-code i{
    text-align: center;
}
.service-icons i:hover{
    -webkit-transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    opacity:0.7;
}

Для живой демонстрации - Нажмите здесь