Ivan Sedov

Можно воспользоваться margin-left: calc(50% - 50vw);, но на некоторых девайсах может появиться горизонтальный скролл, который фиксится с помощью overflow-x: hidden;

Думаю под свою верстку сможете сами адаптировать эти примеры.

Если нужно чтобы слайды выходили за пределы контейнера добавляем обертку sub-container

.sub-container { 
  display: flex;
  flex-wrap: wrap; 
  margin-right: calc(50% - 50vw);
 }

Если не нужно чтобы слайды выходили за пределы удаляем обертку sub-container и добавляем во wrapper
margin-right: calc(50% - 50vw);

Проблема в том, что вы используете background-color: rgba(233, 85, 49, 0.1);
Нужно было заменить rgba на hex
https://jsfiddle.net/3vceq47k/