Inline-block isn't working in image gallery

Question

I have a image gallery in a website I'm working on. Instead of float, I need to use inline-block on each image container so that I can center the entire gallery later(I found I would never be able to center floated images after so many try-outs) I'd be appreciated a million times if anybody find flaws in my code. (For the record, I used float on a top navigation above the image gallery. Please tell me if it affected the gallery any how!)

This is html code for image gallery.

   <section>
        <article class="img1">
            <a href=""><img src="img/img1.png"></a>
            <dl>
                <a href="#"><dt>Image Title</dt></a>
                <dd>Image Description</dd>
            </dl>
        </article>
        <article class="img2">
            <a href=""><img src="img/img2.png"></a>
            <dl>
                <a href="#"><dt>Image Title</dt></a>
                <dd>Image Description</dd>
            </dl>
        </article>
        <article class="img3">
            <a href=""><img src="img/img3.png"></a>
            <dl>
                <a href="#"><dt>Image Title</dt></a>
                <dd>Image Description</dd>
            </dl>
        </article>

This is css code for image gallery.

section{
    margin-top: 80px; /* the gap between top navigation above */
}

article .img1, .img2, .img3 {
    display:inline-block;
    width: 100%;
    height: auto;
    margin-left: 2%;
    padding: 0;
}

article img{
    width: 250px;
    height: 250px;
    margin: 0;
    padding: 0;
}

article dl{
    display: block;
    width: 250px;
    margin-top: 10px;
    text-align: left;
}

article dt{
    font-size: 0.9em;
    font-weight: 400; 
}

article dd{
    margin-left: 0;
    font-size: 0.9em;
    font-weight: 300; 
}

Answer 1

The problem is that you're setting a width of 100% on the <article> elements, so although they're set to display: inline-block, they each take up 100% of the row. To avoid this, you'll want to give them a smaller percentage-based width, ideally with width: calc((100% / 3) - (2% * 3)). This sets them to take up as much width as possible, while accounting for both the number of elements and also the margin-left on each.

Also note that your <img> tags have a hard-coded fixed width. Because you're now adjusting your containing <article> tags to be relative to the container, these images should be given a width of 100%.

This can be seen in the following:

section {
  margin-top: 80px;
  /* the gap between top navigation above */
}

.img1,
.img2,
.img3 {
  display: inline-block;
  width: calc((100% / 3) - (2% * 3));
  height: auto;
  margin-left: 2%;
  padding: 0;
}

article img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

article dl {
  display: block;
  width: 250px;
  margin-top: 10px;
  text-align: left;
}

article dt {
  font-size: 0.9em;
  font-weight: 400;
}

article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}

<section>
  <article class="img1">
    <a href=""><img src="http://placehold.it/100"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img2">
    <a href=""><img src="http://placehold.it/100"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img3">
    <a href=""><img src="http://placehold.it/100"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>