How to place differently sized images in 2 coloums 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 excercise, 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 coloumns - in these 2 coloumns 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 coloums, 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 eachother in the right (second) coloumn.