Jump to content

h3 bg color extending upward


Recommended Posts

Posted (edited)

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 by larvapuppy
Link to comment
Share on other sites

  • larvapuppy changed the title to h3 bg color extending upward

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...