sleepyKitty

Лучше сделайте по аналогии с Bootstrap. Разделите сущности по обязанностям, разделите свой container на container и row.
container ограничивает width и имеет margin: 0 auto; .
row это flex контейнер для col. И все правильно, свойстово flex-wrap: wrap. Но тогда у колонок помимо flex: 0 0 {value}%;, определите max-width: {value}%;, чтобы сетка не сыпалась.

В текущем варианте, ваша верстка не гибкая, так как контейнер не используешь без flex и как его сетку не используешь без ограничения ширины.

Примерно так:

.cotainer {
  width: $my-width-value;
  width: 100%;
  margin: 0 auto;
  padding-right: 15px;
  padding-left: 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col {
  flex: 0 0 $col-width:
  max-width: $col-width:
  padding-right: 15px;
  padding-left: 15px;
}

А почему вы не хотите трогать картинки? В данном случае выровнять картинки (сами файлы сделать нужного размера и правильно расположить в них изображение) — как раз нормальное решение. Представьте, что символы в шрифте были бы разной высоты, а потом каждый из них бы знал, насколько нужно подвинуться, чтобы встать по базовой линии. Так не делают, и глифы располагают сразу в нужном месте литерных площадок.