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

Question

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

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

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

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

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

    <h2 class="photo-title fade-in-bottom flex font-title animate" id="photo">
      PHOTO
    </h2>
    <div class="photo-inner flex">
      <div class="photo-inner-items flex">
        <div class="slider-photo flex">
          <div><img src="img/難波.jpg" alt="難波" /></div>
          <div><img src="img/渋谷.jpg" alt="渋谷" /></div>
          <div><img src="img/横浜.jpg" alt="横浜" /></div>
          <div><img src="img/東山.jpg" alt="東山" /></div>
          <div><img src="img/博多.jpg" alt="博多" /></div>
          <div><img src="img/花園.jpg" alt="花園" /></div>
          <div><img src="img/祇園.jpg" alt="祇園" /></div>
          <div><img src="img/吉祥寺.jpg" alt="吉祥寺" /></div>
          <div><img src="img/秋葉原.jpg" alt="秋葉原" /></div>
          <div><img src="img/新宿.jpg" alt="新宿" /></div>
          <div><img src="img/川越.jpg" alt="川越" /></div>
          <div><img src="img/池袋.jpg" alt="池袋" /></div>
          <div><img src="img/天王寺.jpg" alt="天王寺" /></div>
          <div><img src="img/梅田.jpg" alt="梅田" /></div>
          <div><img src="img/伏見稲荷.jpg" alt="伏見稲荷" /></div>
        </div>
        <div class="work-font font-title">
          - PHOTO一覧 -
          <a href="photo.html"
            ><i class="work-arrow fas fa-chevron-right"></i
          ></a>
        </div>
      </div>

h2#photo {
  padding-top: 12rem;
  margin-top: -8rem;
}

.photo-inner {
  width: 100%;
  height: 45rem;
  flex-direction: column;
  margin-bottom: 5rem;

  &-items {
    width: 90%;
    height: 40rem;
    margin-top: 8rem;
    position: relative;
    flex-direction: column;

    &::after {
      width: 100%;
      height: 40rem;
      content: "";
      position: absolute;
      left: 0rem;
      top: 1rem;
      transform: skewY(-5deg);
      z-index: -1;
      transform-origin: bottom left;
      background: $main-color-b;
    }

    .slider-photo {
      div {
        img {
          margin: 0 auto;
        }
      }
    }

    .work-font {
      font-size: 1.5rem;
      color: $main-color-w;

      a {
        i {
          transition-duration: 0.4s;
          padding: 2rem;
          z-index: 10;
        }
      }

      i:hover {
        transform: translateX(20px);
      }

      .work-arrow {
        color: $main-color-w;
        padding: 1rem;
      }
    }
  }
}

.photo-inner {
  &-items {
    .slider-photo {
      width: 90%;
      height: 20rem;
    }

    & div img {
      width: 25rem;
      height: 18rem;
    }

    .slick-arrow {
      cursor: pointer;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    .prev-arrow {
      color: $main-color-w;
      left: -1.5rem;
      top: 8rem;
      z-index: 10;
    }

    .next-arrow {
      color: $main-color-w;
      right: -1.5rem;
      top: 8rem;
    }
  }
}

$(".slider-photo").slick({
  infinite: true,
  autoplay: true,
  arrow: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplaySpeed: 4000,
  centerMode: true,
  centerPadding: "-10%",
  prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>',
  nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        infinite: true,
        autoplay: true,
        arrow: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplaySpeed: 4000,
        prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>',
        nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
      },
    },
    {
      breakpoint: 600,
      settings: {
        infinite: true,
        autoplay: true,
        arrow: true,
        slidesToShow: 1,
        autoplaySpeed: 4000,
        prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>',
        nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
      },
    },
  ],
});

$(".slider-works").slick({
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 2,
      },
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 1,
      },
    },
  ],
});

$(document).ready(function () {
  $("#top-button").hide();
  $(window).on("scroll", function () {
    if ($(this).scrollTop() > 100) {
      $("#top-button").fadeIn("fast");
    } else {
      $("#top-button").fadeOut("fast");
    }
    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    footHeight = $("footer").innerHeight();
    if (scrollHeight - scrollPosition <= footHeight) {
      $("#top-button").css({
        position: "absolute",
      });
    } else {
      $("#top-button").css({
        position: "fixed",
      });
    }
  });

  $("##top-button").click(function () {
    $("body,html").animate(
      {
        scrollTop: 0,
      },
      800
    );
    return false;
  });
});

Answer 1

恥ずかしながら本件が原因でなかった為、クローズ致します。