Building a gallery section on a webpage and I cannot get the pictures how I want them

HTML-CSS
1

I want the pictures in the gallery section to look like



Right now they look like

And they overlap with my next section. Maybe I am not seeing something, but I cannot figure it out and it is frustrating.

Thanks for any help!

2

I can’t see your images due to me being on a phone, and it looks like you haven’t got to the mobile view yet. What about using flex box? And using flex-wrap?

3

Never even thought of that! I’ll try that and see if that works. Thanks!

4

Why is your #photos div inside an h2 element?

Super quick way it can be done, this is without any media queries so it’s not a 3 by n grid. But it’s just to show a grid version. I have commented out the style rules, that needs removing.

ul#photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 20px;
}

ul {
  list-style: none;
  margin: 0px auto;
  /* padding: 10px; */
  display: block;
  /* max-width: 780px; */
  text-align: center;
}

#photos img {
  width: 100%;
  /* float: left; */
  display: block;
  /* margin: 2px; */
}