Q:

CSS Bootstrap 4 - making multiple line row with equal columns

I am trying to make a multiple line row with equal width columns with Bootstrap 4.  This is the loop where I am creating this columns:
 <div class="row video-section">
    <div class="col-md-12">
      @if(!(count($videos) > 0))
      <p>{{ $player->first_name }} {{ $player->last_name }} has no videos yet.</p>
      @else
      @foreach($videos as $video)
      <div class="col-md-3 profile-video-box">
        <a href="/player/video/{{ $video->uid }}/{{ $video->player->fullName }}">
          <div class="card bg-dark text-white">
            <img src="{{ $video->getThumbnail() }}" class="card-img"/>
            <div class="card-img-overlay">
              <div class="play-icon-wrapper">
                <i class="ion-ios-play"></i>
              </div>
              <div class="card-content">
                <h5 class="card-title">{{ $video->title ! = '' ?   $video->title : 'Untitled' }}
                </h5>
                <p class="card-text">{{ $video->created_at->diffForHumans() }}
                </p>
              </div>
            </div>
          </div>
        </a>
      </div>
      @endforeach
    </div>
  </div> 

But, then the each column takes up the whole row, since it gets the margin right to take up the rest of the space in the row.  How can I fix that and create multiple line row? 
Update 
Here is the fiddle. 

A:

Try with this code and fiddle
        <div class="row video-section ">
        <div class="container">
            <div class="row">
                <div class="col-md-3 profile-video-box">
                    123
                </div>
                <div class="col-md-3 profile-video-box">
                    456
                </div>
                <div class="col-md-3 profile-video-box">
                    759
                </div>
            </div>
        </div>
    </div>

