CSS Grids correct alignment

Trying to realize the above structure in my UI. A big picture and thumbnails below it. I am using the grid components for it. Code:

<div class="row">
    <div class="col">
        <img url="bigPic"></img>
    </div>
</div>
<div class="row">
    <div class="col" ng-repeat="pic in Pics">
        <img url="pic"></img>
    </div>
</div>

Now I want to delete pictures out of Pics. That's why I introduce badges with the following code:

<div class="row">
    <div class="col">
        <img url="bigPic"></img>
    </div>
</div>
<div class="row">
    <div class="col" ng-repeat="pic in Pics">
        <img url="pic"></img>
        <span class="badge badge-assertive picture-thumbnail-badge"
                                  on-tap="removePic($index)">
            <i class="icon ion-ios7-close-empty"></i>
        </span>
    </div>
</div>

And this results in the following (with a css class moving the badges in the top left corner):

.picture-thumbnail-badge{
  position: relative;
  top:-60px;
  right:65px;
  z-index: 100;
}

The Problem here is that the thumbnails are no longer centered underneath the big picture. I guess the flexbox is taking into account the size of the badge somehow. My obvious question now: how can I ignore the badge in the alignment calculation and make this thumbnail row centered, even with badges? Thanks in advance.