Smithy Smithy - 18 days ago 6
CSS Question

Align multiple images to center with margin between them

I would like to align these three images to center and make it responsive so they stack one under the other, but I can't figure out why the container about__inner always goes slightly to the left..? Here's the Codepen link: http://codepen.io/anon/pen/PbpMbj



section.about {
font-family: 'Montserrat', sans-serif;
text-align: center;
}
.small__title {
font-family: 'Kaushan Script', cursive;
font-size: 16px;
}
.big__title {
font-weight: bold;
font-size: 20px;
}
.description {
width: 700px;
margin: 0 auto;
font-size: 12px;
}
.about__images {
max-width: 780px;
margin: 0 auto;
}
.about__inner {
margin-top: 60px;
float: left;
}
.about__inner img {
max-width: 240px;
margin-right: 20px;
}

<section class="about">
<h5 class="small__title">lorem</h5>
<h4 class="big__title">Lorem lorem</h4>
<hr class="horizontal__rule">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae commodi nisi aut animi, excepturi impedit dicta natus culpa. Veniam atque sapiente assumenda fugiat tempore ipsam eos quae</p>
<div class="container">
<div class="row about__images">
<div class="about__inner first">
<img src="https://placeholdit.imgix.net/~text?txtsize=36&txt=383%C3%97262&w=383&h=262" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>LOREM IPSUM</p>
</div>
</div>
<div class="about__inner">
<img src="https://placeholdit.imgix.net/~text?txtsize=36&txt=383%C3%97262&w=383&h=262" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>LOREM IPSUM</p>
</div>
</div>
<div class="about__inner">
<img src="https://placeholdit.imgix.net/~text?txtsize=36&txt=383%C3%97262&w=383&h=262" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>LOREM IPSUM</p>
</div>
</div>
</div>
</div>
</section>




Answer

Since you are already using Bootstrap then just use its default classes for better alignment as:

Code Snippet:

section.about {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}
.small__title {
  font-family: 'Kaushan Script', cursive;
  font-size: 16px;
}
.big__title {
  font-weight: bold;
  font-size: 20px;
}
.description {
  width: 700px;
  margin: 0 auto;
  font-size: 12px;
}
/*.about__images,
.about__images * {
   box-sizing: content-box;
}*/

.about__images {
  max-width: 780px;
  margin: 0 auto;
}
.about__inner {
  margin-top: 60px;
}
.about__inner img {
  max-width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="about">
  <h5 class="small__title">lorem</h5>
  <h4 class="big__title">Lorem lorem</h4>
  <hr class="horizontal__rule">
  <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae commodi nisi aut animi, excepturi impedit dicta natus culpa. Veniam atque sapiente assumenda fugiat tempore ipsam eos quae</p>
  <div class="container">
    <div class="about__images">
      <div class="row">
        <div class="about__inner col-md-4">
          <img src="https://placeholdit.imgix.net/~text?txtsize=36&txt=383%C3%97262&w=383&h=262" alt="">
          <div class="about__inner--overlay">
            <i class="fa fa-user" aria-hidden="true"></i>
            <p>LOREM IPSUM</p>
          </div>
        </div>
        <div class="about__inner col-md-4">
          <img src="https://placeholdit.imgix.net/~text?txtsize=36&txt=383%C3%97262&w=383&h=262" alt="">
          <div class="about__inner--overlay">
            <i class="fa fa-user" aria-hidden="true"></i>
            <p>LOREM IPSUM</p>
          </div>
        </div>
        <div class="about__inner col-md-4">
          <img src="https://placeholdit.imgix.net/~text?txtsize=36&txt=383%C3%97262&w=383&h=262" alt="">
          <div class="about__inner--overlay">
            <i class="fa fa-user" aria-hidden="true"></i>
            <p>LOREM IPSUM</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Also the Codepen