Personal Portfolio Update - Centering a div in Bootstrap

I’m updating my personal portfolio. The issue I’m hitting is with centering a thumbnail div when it’s at the xs breakpoint.

Everything is fine when the page is at the large viewing point:

But when I resize the browser to a smaller size (having one project thumbnail per line), the div is aligned to the left:

What I’ve tried:

Flexbox – This is the most suggested answer I’ve found. I tried using the display: flex method, but it made no difference (I believe Bootstrap defaults were overriding my rules).

Margin auto – This method also didn’t work. It didn’t make any difference when applied to my thumbnail class.

My code:

HTML

CSS

Can anyone see a way for me to center the thumbnail divs while still using Bootstrap?

Thanks :slight_smile:

This should work:

.thumbnail{
  margin: auto;
}

Found this to be a good explanation of flexbox.