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