Ширина скользящего слайдера слишком велика и не работает

Question

Я пытаюсь создать красивый слайдер с гладкой поверхностью. Но при тестировании ширина огромна. Я провел некоторое исследование, и эти ответы не помогли:

Расположение и ширина скользящего слайдера

Пропуск ширины гладкой карусели

Неправильный дисплей flexbox в Chrome 48

Поскольку я много читал, что это также проблема с Opera, в Safari ширина меньше, но вид также не очень хороший.

Это мой код:

$(".fslider").slick({
  autoplay: true,
  dots: true,
  responsive: [{
    breakpoint: 500,
    settings: {
      dots: false,
      arrows: false,
      infinite: false,
      slidesToShow: 3,
      slidesToScroll: 1
    }
  }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- for demo -->

<div class="o-grid o-grid--equal-height">
  <div class="o-grid__col u-12/12 u-mb-x6">
    <div class="fslider slick-slider">
      <div>
        <p>1</p>
      </div>
      <div>
        <p>2</p>
      </div>
      <div>
        <p>3</p>
      </div>
      <div>
        <p>4</p>
      </div>
    </div>
  </div>
</div>

О загрузке: уверен, что все в порядке.

Это мой сайт в console-elements:

заранее спасибо