White space between two horizontal images - html

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;
<div class="row">
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>

Answer 1

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;
<div class="row">
<div class="campus-col">
<img src="https://via.placeholder.com/150">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="https://via.placeholder.com/150">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>

Answer 2

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;
<div class="row">
<div class="campus-col">
<img src="https://picsum.photos/200">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="https://picsum.photos/200">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>

Answer 3

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

Answer 4

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;
}
<div class="row">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
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;
}
<div class="row">
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>