White space between two horizontal images

Question

can anyone help me on how to remove the huge white space between the two images? Both images are in their respective divs with layer effects when hovered. I have tried changing display to inline-block and setting font-size to 0 but nothing works. I also want the two images to be at the center when adjusted. I may have incorrectly apply the mentioned efforts to different classes or divs throughout the process but I am not sure where I did wrong.

Attached are the html and css along with a screenshot of how it looks like on local server. I hope the attachments are useful. Thank you.

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.campus-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.campus-col img{
    width: 100%;
    display: block; 
}
.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.layer:hover{
    background: rgba(226,0,0,0.7);
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;

user_4622620 · Answer

Like this?

If so you just need to use display: flex and align-items: flex-start

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}


.row {
  display: flex;
  align-items: flex-start
}

.campus-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.campus-col img{
    width: 100%;
    display: block; 
}
.layer{
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.5s;
}
.layer:hover{
    background: rgba(226,0,0,0.7);
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    text-align: center;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;

user_11989189 · Answer

Try to make row flex container, then align content to center, with gap you can make space between images:

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
  display: flex;
  justify-content: center;
  gap: 1em;
}
.campus-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.campus-col img{
    width: 100%;
    display: block; 
}
.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.layer:hover{
    background: rgba(226,0,0,0.7);
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;

user_16693580 · Answer

you can use bootstrap class for width .campus-col or use custom width

user_14559436 · Answer

You can use (justify-content: center) to center the children in the flex displayed parent, in short: center the .img in .row.

Then you can add margin for spaces between them (the method used in the code below).

Or you can use (justtify-content: space-between) and set the width of the parent (.row), then each .img will be at the edge or it's direction (left or right)

Check this for more detalis: A Complete Guide to Flexbox

The Code:

.row {
  display: flex;
  justify-content: center;
}

.img {
  width: 200px;
  height: 300px;
  border: 1px solid;
  border-radius: 6px;
}

.img {
  margin: 0 20px;
}

Solution based on your code:

Edited:

.row {
  display: flex;
  justify-content: center;
}

.campus-col{
    height: 200px; /* delete later, added to see the changes */
    border: 1px solid #ddd; /* delete later, added to see the changes */
    margin: 0 10px; /* add/remove spaces (left right of each one) */
}

The Code:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.row {
  display: flex;
  justify-content: center;
}

.campus-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    height: 200px;
    border: 1px solid #ddd;
    margin: 0 10px;
}

.campus-col img{
    width: 100%;
    display: block; 
}

.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.layer:hover{
    background: rgba(226,0,0,0.7);
}

.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}

.layer:hover h3{
    bottom: 49%;
    opacity: 1;
}

White space between two horizontal images

4 Answers