Who can tell where such a huge space comes from?

Question

Layout

Here is a piece of code:

<div class="col-md-4 selector">
  <ul id="list-tab" class="nav flex-column list-group" role="tablist">
    <li class="list-group-item">
      <a href="#list-fromNovorossiysk" class="row list-group-item-action align-items-stretch rounded no-gutters" data-toggle="list" role="tab" aria-controls="fromNovorossiysk" aria-selected="false">
        <div class="col-3 bg-image-groom rounded"></div>
        <div class="col">
          <div>Karen Sanders</div>
          <div>Project Manager</div>
        </div>
      </a>
    </li>
    <li class="list-group-item">
      <a href="#list-fromNovorossiysk" class="row align-items-stretch  list-group-item-action rounded no-gutters" data-toggle="list" role="tab" aria-controls="fromNovorossiysk" aria-selected="false">
        <div class="col-3">
          <img class="img-fluid rounded" src="/img/groom.jpg">
        </div>
        <div class="col">
          <div>Karen Sanders</div>
          <div>Project Manager</div>
        </div>
      </a>
    </li>
  </ul>
</div>

I make switches through list-tabs and list-group.
In the first switch, the picture is in the background. In the second one, through In the first switch, a huge space appears from nowhere (not even an indent), and it is worth replacing it with a picture through , it disappears. In this case, everything is through bootstrap-4 except for one class, here are its properties:<img>
<img>

.bg-image-groom {
    background-image: url(/img/groom.jpg);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Directly if you copy without everything else (property tables and other blocks), then this is how it turns out.
Who knows what is causing this?