Random gaps on site

Site URL: https://radish-crimson-9x48.squarespace.com/

Hi,

password to view: Amalie

I was nearly finished with my site but now random gaps keep appearing in between my photos on the gallery section.

The section is called 'People' 

there are two white squares which should not be there.

Here is the code i'm using is css:

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.5); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1.7rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 0.5;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.5); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1.3rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 2;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

Then for each image I have typed into the box: 

<a href="https://www.instagram.com/guy_owen/ ">Guy Owen</a>

the parts in bold are changed for each image to create a click through.

This is the last part of the site I need fixing then it is completely finished - I would really appreciate some help. 

Thank you!

Hi. Looks fine here. Can you explain clearly?