slick.jsでslick-trackのwidthが画面幅を超えてしまう

前提

slick-carousel@1.8.1
$sp_footer: 900px;

レスポンシブサイトの作成で、Slick.jsを使用しています。
Chrome検証ツールで画面幅を930px以下にした際、slickの横幅が100%を超えてしまい、横スクロールが現れてしまいます。
親要素や祖父要素にflexは使用していません。

どなたか、問題と思しき点をご指摘いただけますでしょうか。

実現したいこと

画面幅が小さくなってもslickの横幅が100%を超えない。横スクロールが出ないようにする。

発生している問題

検証ツールで見た際、.slick-trackのwidthが5508pxとなっているのが気になりましたが、関係ありますか。

該当のソースコード

html
1          <div class="access_slider__box">
2            <ul class="access_slider">
3              <li>
4                <img
5                  src="../common/img/index/slide01.jpg"
6                  alt="xxx"
7                  class="access_slider_img"
8                />
9              </li>
10              <li>
11                <img
12                  src="../common/img/index/slide02.jpg"
13                  alt="xxx"
14                  class="access_slider_img"
15                />
16              </li>
17              <li>
18                <img
19                  src="../common/img/index/slide03.jpg"
20                  alt="xxx"
21                  class="access_slider_img"
22                />
23              </li>
24            </ul>
25          </div>

scss
1.access_slider__box {
2  .access_slider {
3    top: 0;
4    width: 66%;
5    margin: 0 auto;
6    .access_slider_img {
7      width: 100%;
8      object-fit: cover;
9    }
10  }
11  @include sp_footer() {
12    .access_slider {
13      width: calc(100% - 36px); // 左右18px分の余白
14      li {
15        img {
16          width: 100%;
17        }
18      }
19    }
20  }
21}
22.access_slide_arrow {
23  bottom: 0;
24  cursor: pointer;
25  margin: auto;
26  position: absolute;
27  top: 0;
28  width: 16px;
29  height: 32px;
30}
31.access_prev_arrow {
32  left: -40px;
33}
34.access_next_arrow {
35  right: -40px;
36}
37@include sp_footer() {
38  .access_slide_arrow {
39    width: 10px;
40    height: 20px;
41  }
42  .access_prev_arrow {
43    z-index: 10;
44    left: -10px;
45  }
46  .access_next_arrow {
47    right: -10px;
48  }
49}
50
51.slide_dots {
52  margin: 0;
53  padding: 0;
54  text-align: center;
55  li {
56    display: inline-block;
57    margin: 0 4px;
58    button {
59      position: relative;
60      text-indent: -9999px;
61    }
62    button::before {
63      content: "";
64      // background-image: url(../common/img/access/dot_gray.png);
65      background-color: #e8e8e8;
66      border-radius: 50%;
67      background-repeat: no-repeat;
68      background-size: contain;
69      cursor: pointer;
70      left: 0;
71      margin: auto;
72      position: absolute;
73      right: 0;
74      top: 40px;
75      height: 12px;
76      width: 12px;
77    }
78    &.slick-active button::before {
79      // background-image: url(../common/img/access/dot_blue.png);
80      background-color: #3d566a;
81    }
82  }
83}
84button {
85  background: none;
86  border: none;
87  outline: none;
88  padding: 0 7px;
89}
90

javascript
1$(".access_slider").slick({
2  autoplay: true,
3  autoplaySpeed: 4000,
4  accessibility: false,
5  arrows: true,
6  prevArrow:
7    '<img src="../common/img/common/arrow-ios-backward-fill-blue.png" class="access_slide_arrow access_prev_arrow">',
8  nextArrow:
9    '<img src="../common/img/common/arrow-ios-forward-fill-blue.png" class="access_slide_arrow access_next_arrow">',
10  dots: true,
11  dotsClass: "slide_dots",
12});