slick.jsにて横幅がはみ出てしまう

自己紹介サイトを作成しており、スマホに対応させたく調整を行っているところです。

そこでslickを使用してスライドショーを導入しておりますが、サイト全体が右に余白が出てしまっております。

原因を調べていたところ恐らく以下画像にあるようにslickの画像が飛び出ているのが原因かと思われます。

「slider-photo img」に対してwidth:90%と指定しておりますが、改善方法が分からない状況です。

分かる方いらっしゃいましたらお力添えを頂きたいです。
宜しくお願い致します。

html
1    <h2 class="photo-title fade-in-bottom flex font-title animate" id="photo">
2      PHOTO
3    </h2>
4    <div class="photo-inner flex">
5      <div class="photo-inner-items flex">
6        <div class="slider-photo flex">
7          <div><img src="img/難波.jpg" alt="難波" /></div>
8          <div><img src="img/渋谷.jpg" alt="渋谷" /></div>
9          <div><img src="img/横浜.jpg" alt="横浜" /></div>
10          <div><img src="img/東山.jpg" alt="東山" /></div>
11          <div><img src="img/博多.jpg" alt="博多" /></div>
12          <div><img src="img/花園.jpg" alt="花園" /></div>
13          <div><img src="img/祇園.jpg" alt="祇園" /></div>
14          <div><img src="img/吉祥寺.jpg" alt="吉祥寺" /></div>
15          <div><img src="img/秋葉原.jpg" alt="秋葉原" /></div>
16          <div><img src="img/新宿.jpg" alt="新宿" /></div>
17          <div><img src="img/川越.jpg" alt="川越" /></div>
18          <div><img src="img/池袋.jpg" alt="池袋" /></div>
19          <div><img src="img/天王寺.jpg" alt="天王寺" /></div>
20          <div><img src="img/梅田.jpg" alt="梅田" /></div>
21          <div><img src="img/伏見稲荷.jpg" alt="伏見稲荷" /></div>
22        </div>
23        <div class="work-font font-title">
24          - PHOTO一覧 -
25          <a href="photo.html"
26            ><i class="work-arrow fas fa-chevron-right"></i
27          ></a>
28        </div>
29      </div>

css
1
2h2#photo {
3  padding-top: 12rem;
4  margin-top: -8rem;
5}
6
7.photo-inner {
8  width: 100%;
9  height: 45rem;
10  flex-direction: column;
11  margin-bottom: 5rem;
12
13  &-items {
14    width: 90%;
15    height: 40rem;
16    margin-top: 8rem;
17    position: relative;
18    flex-direction: column;
19
20    &::after {
21      width: 100%;
22      height: 40rem;
23      content: "";
24      position: absolute;
25      left: 0rem;
26      top: 1rem;
27      transform: skewY(-5deg);
28      z-index: -1;
29      transform-origin: bottom left;
30      background: $main-color-b;
31    }
32
33    .slider-photo {
34      div {
35        img {
36          margin: 0 auto;
37        }
38      }
39    }
40
41    .work-font {
42      font-size: 1.5rem;
43      color: $main-color-w;
44
45      a {
46        i {
47          transition-duration: 0.4s;
48          padding: 2rem;
49          z-index: 10;
50        }
51      }
52
53      i:hover {
54        transform: translateX(20px);
55      }
56
57      .work-arrow {
58        color: $main-color-w;
59        padding: 1rem;
60      }
61    }
62  }
63}
64
65.photo-inner {
66  &-items {
67    .slider-photo {
68      width: 90%;
69      height: 20rem;
70    }
71
72    & div img {
73      width: 25rem;
74      height: 18rem;
75    }
76
77    .slick-arrow {
78      cursor: pointer;
79      position: absolute;
80      top: 0;
81      bottom: 0;
82      margin: auto;
83    }
84
85    .prev-arrow {
86      color: $main-color-w;
87      left: -1.5rem;
88      top: 8rem;
89      z-index: 10;
90    }
91
92    .next-arrow {
93      color: $main-color-w;
94      right: -1.5rem;
95      top: 8rem;
96    }
97  }
98}
99

js
1$(".slider-photo").slick({
2  infinite: true,
3  autoplay: true,
4  arrow: true,
5  slidesToShow: 3,
6  slidesToScroll: 1,
7  autoplaySpeed: 4000,
8  centerMode: true,
9  centerPadding: "-10%",
10  prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>',
11  nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
12  responsive: [
13    {
14      breakpoint: 1024,
15      settings: {
16        infinite: true,
17        autoplay: true,
18        arrow: true,
19        slidesToShow: 2,
20        slidesToScroll: 1,
21        autoplaySpeed: 4000,
22        prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>',
23        nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
24      },
25    },
26    {
27      breakpoint: 600,
28      settings: {
29        infinite: true,
30        autoplay: true,
31        arrow: true,
32        slidesToShow: 1,
33        autoplaySpeed: 4000,
34        prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>',
35        nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
36      },
37    },
38  ],
39});
40
41$(".slider-works").slick({
42  slidesToShow: 3,
43  responsive: [
44    {
45      breakpoint: 1024,
46      settings: {
47        slidesToShow: 2,
48      },
49    },
50    {
51      breakpoint: 600,
52      settings: {
53        slidesToShow: 1,
54      },
55    },
56  ],
57});
58
59$(document).ready(function () {
60  $("#top-button").hide();
61  $(window).on("scroll", function () {
62    if ($(this).scrollTop() > 100) {
63      $("#top-button").fadeIn("fast");
64    } else {
65      $("#top-button").fadeOut("fast");
66    }
67    scrollHeight = $(document).height();
68    scrollPosition = $(window).height() + $(window).scrollTop();
69    footHeight = $("footer").innerHeight();
70    if (scrollHeight - scrollPosition <= footHeight) {
71      $("#top-button").css({
72        position: "absolute",
73      });
74    } else {
75      $("#top-button").css({
76        position: "fixed",
77      });
78    }
79  });
80
81  $("##top-button").click(function () {
82    $("body,html").animate(
83      {
84        scrollTop: 0,
85      },
86      800
87    );
88    return false;
89  });
90});