h3 bg color extending upward

[larvapuppy]

Hi, I'm new to CSS.

I used the image gallery code provided by w3schools. https://www.w3schools.com/Css/css_image_gallery.asp

I wanted to add a second gallery on the same page, with a h3 html header as a divider. However, the h3's indigo background color has extended upward to the first image gallery. If anyone knows what I'm doing wrong I'd really appreciate some tips.

Here's the CSS I used for the image gallery (basically just copied from w3schools with some small changes):

div.gallery {
  background-color: lightgreen;
  border-radius: 50%;
  margin: 5px;
}

div.gallery:hover {
  color: #e1ffaa;
  background-color: indigo;
  box-shadow: 0 0 5px magenta;
}

div.gallery img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 15px 15px 15px 15px;
  float: left;
  width: 33.333333%;
}

Here's the CSS I made for the h3:

h3 {
    color: lightgreen;
    background-color: indigo;
    padding: 10px;
    margin: 10px 0px 10px 0px;
}

I can show my html as well if necessary.

Thank you!

Edited May 21, 2023 by larvapuppy