Page overflowing to the right when I use center an image container

I'm a little stuck with this problem: I have a nested image container that contains three images per row, three rows. I need it to be centered. I tried text-align on the parent container but it doesn't work so I used flex property align-items: center; but instead of aligning itself on the center of the page, the image container overflows to the right making it scrollable.

I've tried inspecting the page in Google Chrome but I can't seem to find what element was causing it. Here is a snapshot with the align property unchecked:

enter image description here

Here is what happens when I tick it:

enter image description here

Here is also my code in Codepen if you need to check it out:

https://codepen.io/asparagus-inator/pen/dyOrNmv

I've been looking at my code for hours now and I'm at a loss as to what causes this behavior. I would really appreciate the help. Thank you in advance.

Solution

Your problem is in the img elements. Changing the img-row and gallery-img classes fix it. Just needed to set the width properly and justify the img-row content.

.img-row {
     display: flex;
     width: 100%;
     height: auto;
     justify-content: center;
 }

 .gallery-img {
     width: 30%;
     height: auto;
     padding: 1%;
}