Трюк для выравнивания карусели по сравнению с текстом

Question

Я использую плагин slick для создания карусели, но есть ли у вас хитрость (css или jquery), чтобы выровнять первый слайд по сравнению с заголовком и сохранить эффект последнего слайда при правильном разрезе по границе экрана?

Мой текст находится внутри контейнера начальной загрузки. Если я добавлю поле слева в процентах к карусели, то при изменении размера окна карусель больше не будет соответствовать моему названию

Если я помещу карусель в контейнер, последний слайд справа не сохранитсяэффект, вырезанный по краю окна.

Codepen: https://codepen.io/clicclic/pen/PooRWRe

$(".more__slides").slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  variableWidth: true,
  rows: 0,
  dots: false,
  infinite: false
});

Хотелось бы получить такой результат:

Но на данный момент я получил это:

Answer 1

Просто оберните весь код html с родительским

    <div class="Parentcontainer">
         //Your code
    </div>

CSS:

.Parentcontainer{
  padding:50px;
}
.more__slide {
   display: block;
   height: 300px;
   width: 270px;
   background-color: red;
}

и удалите div container из заголовка.