Не выравнивается содержимое блока по горизонтали

Question

.features-box-icon {
    background: #d3ffea none repeat scroll 0 0;
    border-radius: 5px;
    color: #31dc89;
    height: 70px;
    margin-bottom: 40px;
    padding-top: 15px;
    text-align: center;
    width: 70px;
}
.box-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 20px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
}
.box-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
}
h1, h2, h3, h4, h5, h6 {
    color: #2e2e43;
    line-height: 1.3;
    margin: 0 0 15px;
}
p{
    margin: 0 0 10px;
}
div {
    display: block;
}
.icofont {
    font-family: icofont!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
}

 <div class="container">
        <div class="row promo-content">
            <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
                <div class="text-icon-box mb20 xs-mb0 wow fadeInUp padding30" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
                <div class="box-icon features-box-icon">
                <i class="fa fa-graduation-cap"><img src="images/Screenshot_1.png" align="center"></i>
                </div>
                <h3 class="box-title">Certificate</h3>
                <p>A Google Docs scam that appears to be<p>widespread began landing in Wednesday</p><p>in what seemed to be a phishing attack.</p>
                </div>
            </div>
            <div class="col md-4 col-lg-4 col-sm-6 col-xs-12">
                <div class="text-icon-box relative mb20 xs-mb0  wow fadeInUp padding30" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
                <div class="box-icon features-box-icon">
                <i class="icofont icofont-business-man-alt-1"><img src="images/Screenshot_2.png"></i>
                </div>
                <h3 class="box-title">Expert Instructors</h3>
                <p>A Google Docs scam that appears to be<p>widespread began landing in Wednesday</p><p>in what seemed to be a phishing attack.</p>
                </div>
            </div>
        </div>
    </div>

Answer 1

тег i является строчным элементом, внутрь него нельзя поставить картинку. если вы хотите иконку и картинку по горизонтали , их можно просто поставить так
div по умолчания display:block;

Answer 2

.container .col {
  width: 50%;
  display: inline-block;
  float: left;
}

.features-box-icon {
  background: #d3ffea none repeat scroll 0 0;
  border-radius: 5px;
  color: #31dc89;
  height: 70px;
  margin-bottom: 40px;
  padding-top: 15px;
  text-align: center;
  width: 70px;
}

.box-icon {
  margin: 20px auto;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 20px;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
}

.box-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 20px;
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #2e2e43;
  line-height: 1.3;
  margin: 0 0 15px;
}

p {
  margin: 0 0 10px;
  text-align: center;
}

div {
  display: block;
}

.icofont {
  font-family: icofont!important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
}

<div class="container">
  <div class="row promo-content">
    <div class="col md-4 col-lg-4 col-sm-6 col-xs-12">
      <div class="text-icon-box mb20 xs-mb0 wow fadeInUp padding30" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
        <div class="box-icon features-box-icon">
          <i class="fa fa-graduation-cap"><img src="images/Screenshot_1.png" align="center"></i>
        </div>
        <h3 class="box-title">Certificate</h3>
        <p>A Google Docs scam that appears to be
          <p>widespread began landing in Wednesday</p>
          <p>in what seemed to be a phishing attack.</p>
      </div>
    </div>
    <div class="col md-4 col-lg-4 col-sm-6 col-xs-12">
      <div class="text-icon-box relative mb20 xs-mb0  wow fadeInUp padding30" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
        <div class="box-icon features-box-icon">
          <i class="icofont icofont-business-man-alt-1"><img src="images/Screenshot_2.png"></i>
        </div>
        <h3 class="box-title">Expert Instructors</h3>
        <p>A Google Docs scam that appears to be
          <p>widespread began landing in Wednesday</p>
          <p>in what seemed to be a phishing attack.</p>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Не выравнивается содержимое блока по горизонтали

Ответы (2 шт):