CSS image gallery isn’t centering well

  Kiến thức lập trình

I made a website using HTML and CSS which can be seen here.
It works but as you can see, the image gallery has some spacing issues.
the first space is bigger than the other ones

As you can see, the space from the first image to the other image is inconsistent.

This is a snippet of my CSS:

.gallery {
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    display: inline-block;
    border: 3px solid #8f8f8f;
    margin: 5px;
    border-radius: 15px;
    background-color: #29313d;
}
.gallery description {
    padding: 10px;
    text-align: center;
}
.gallery:hover {
    border: 3px solid #ccc;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.gallery img {
    width: 200;
    height: 100px;
    border-radius: 12.5px;
    object-fit: cover;
}

That’s the code that causes that inconsistency. How do I fix it?

New contributor

Micamaster100 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

LEAVE A COMMENT