class="center-block"

float-left

<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 btn-host-img-left" name="whyjoin?-host"  value="whyjoin?-host">Why Join?</button>
          <button type="submit" class="btn btn-danger btn-sm btn-host-img-center" name="howitworks"  value="howitworks">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 left-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" name="whyjoin?"  value="whyjoin?">Why Join?</button>
            <button type="submit" class="btn btn-danger btn-sm" name="howitworks"  value="howitworks">How It Works</button>
          </div>
      </div>
    </div>
  </div>

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%;
}