image in bootstrap column has space on right side - html

Question

EDIT: This was my issue
bootstrap 4 center-block unable to center
I cannot for the life of me figure out how to properly align this image inside a bootstrap column. You can see how there is a big whitespace gap to the right of the image between the border of the image and the padding for the div column the image is in.
I have a row with 3 columns. I want the 2 images to be properly aligned in the page. this would be more easily accomplished if this awkward whitespace did not appear.
For now, I've added the below as a (not-so) quick fix.
.right-img {
padding-left: 45px;
}
I have tried several avenues including
class="center-block"
and removing
float-left
from the show-image class and flexbox and display-block and all the align properties and ensuring I have a container above the row.
I would really appreciate it if someone could help with the issue.
Here is the HTML:
<div class="container">
<div class="row">
<div class="col-lg-5 show-image">
<img class="img-responsive rounded head-img" src="{{ url_for('static', filename='#') }}" alt="Image Failed to Load">
<div class="hover-buttons">
<button type="submit" class="btn btn-danger btn-sm">Why Join?</button>
<button type="submit" class="btn btn-danger btn-sm">How It Works</button>
</div>
</div>
<div class="col-lg-2" id="with-container">
<h1 class="my-4 text-center">WITH</h1>
</div>
<div class="col-lg-5 show-image right-img">
<img class="img-fluid rounded head-img" src="{{url_for('static', filename='#')}}" alt="Image Failed to Load">
<div class="hover-buttons left-buttons">
<button type="submit" class="btn btn-danger btn-sm">Why Join?</button>
<button type="submit" class="btn btn-danger btn-sm">How It Works</button>
</div>
</div>
</div>
</div>
And here is the styling:
div {
border: 1px dashed red;
}
.head-img {
width: 400px;
height: 287px;
}
#with-container {
display: flex;
justify-content: center;
align-items: center;
}
div.show-image {
position: relative;
float: left;
}
div.show-image:hover img{
opacity:0.5;
}
div.show-image:hover .hover-buttons {
display: inline-block;
}
.hover-buttons {
position: absolute;
display:none;
}
div.show-image .hover-buttons {
top: 75%;
left: 12%;
}
div.show-image .left-buttons {
top: 75%;
left: 19%;
}

Answer 1

You could apply the following bootstrap helper class to the parent div:
text-center
Which should horizontally align the image for you. The full div class structure should look like the following:
<div class="col-lg-5 show-image text-center">
Further reading: https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment