How to place differently sized images in 2 columns with figcaption aligned

Sorry if this is a trivial question, I am 'new' to programming in general but here goes:

So I am making a Portfolio page as an exercise, but I can't solve the following problem.

I got 6 figures, all contain an img (which are links) and a figcaption. I am trying to place these in 2 columns - in these 2 columns the images should be centered with their figcaption.

I have tried several methods: trying to make images inline-blocks, trying to make 2 divs for the 2 columns, trying to use the Bootstrap grid system but I always end up with the following problem.

When on full page view, the smaller images (in width) have some "autopadding" added to them, so the area around them also becomes a link + the figcaption is not displayed under them. I am guessing this is they are displayed as an inline block. No matter how I try, this happens every time.

I known there must be an easy solution for this, but I just can't seem to find it. Any advice please?

To better understand the issue, here is a link to the site I am talking about: http://codepen.io/Bubicica/pen/RRaaze (note it looks OK here, this is how I want it to look) http://codepen.io/Bubicica/full/RRaaze/ (here 'Project fuzzy' looks pretty bad and shows the problem)

Here is the the (one of the) CSS(s) and (one of the) HTML(s) that I am using:

figure {
  display: inline-block;
  width: 33%;
  margin-left: 12%;
  margin-bottom: 5%;
  padding: 0px;
  text-align: center;
}

figcaption {
  margin-top: 2%;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

<figure>
      <a href="https://www.youtube.com/watch?v=N42X5dljQGk" target="_blank"><img src="http://placekitten.com/300/300" class="img-responsive kitten" id="img1"></a>
      <figcaption>Project Fur
      </figcaption>
</figure>

<figure>
    <a href="https://www.youtube.com/watch?v=tYXlFYBW56g&feature=youtu.be" target="_blank"><img src="http://placekitten.com/310/330" class="img-responsive kitten" id="img2"></a>
    <figcaption>Project Warm
    </figcaption>
</figure>

Edit: setting Width to auto or not setting at all for figure gives me the right aligning but then the images are not aligned under each other in the right (second) column.

Solution

It seems that the easiest solution to your problem would be to use Flexbox (display: flex) on the items as it allows for very high customization of the alignment of things. The best resource for this for me has has been CSS-Tricks' guide, here. After reading that, I'm confident you'll have enough of an understanding of it to be able to apply it to your problem here.