slick.jsでコンテンツの幅が合わなくなる

slick.jsの親要素にwidth:1080px;設定したところコンテンツの幅が合わなくなりました。
slick.jsはslidesToShow: 7,できれいに等分で配置されると記憶していたのですが。。

詳しい方お願いします。。

<ul class="second-slider pl-0 slick-initialized slick-slider"><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button><div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 3105px; transform: translate3d(-945px, 0px, 0px);"><div class="slick-slide slick-cloned" data-slick-index="-7" aria-hidden="true" style="width: 135px;" tabindex="-1"><div><li style="width: 100%; display: inline-block;">
            <a href="#" tabindex="-1">
              <div class="card">
                <img class="card-img-top" src="images/04.jpg" alt="カードの画像">
                <div class="card-body">
                  <h2 class="card-title">タイトル</h2>
                  <div class="row card-bottom-text">
                    <div class="col-md-7 pr-0 text-left d-flex">
                      <img class="card-bottom-user-img" src="images/01.jpg">
                      <span class="card-bottom-user-name">ユーザー名</span>
                    </div>
                    <div class="col-md-5 pl-0 text-right">
                      50,000円
                    </div>
                  </div>
                </div>
              </div>
            </a>
          </li></div></div><div class="slick-slide slick-cloned" data-slick-index="-6" aria-hidden="true" style="width: 135px;" tabindex="-1"><div><li style="width: 100%; display: inline-block;">
            <a href="#" tabindex="-1">
              <div class="card">
                <img class="card-img-top" src="images/04.jpg" alt="カードの画像">
                <div class="card-body">
                  <h2 class="card-title">タイトル</h2>
                  <div class="row card-bottom-text">
                    <div class="col-md-7 pr-0 text-left d-flex">
                      <img class="card-bottom-user-img" src="images/01.jpg">
                      <span class="card-bottom-user-name">ユーザー名</span>
                    </div>
                    <div class="col-md-5 pl-0 text-right">
                      50,000円
                    </div>
                  </div>
                </div>
              </div>
            </a>
          </li></div></div><div class="slick-slide slick-cloned" data-slick-index="-5" aria-hidden="true" style="width: 135px;" tabindex="-1"><div><li style="width: 100%; display: inline-block;"><a href="#" tabindex="-1">
            <div class="card">
              <img class="card-img-top" src="images/04.jpg" alt="カードの画像">
              <div class="card-body">
                <h2 class="card-title">タイトル</h2>
                <div class="row card-bottom-text">
                  <div class="col-md-7 pr-0 text-left d-flex">
                    <img class="card-bottom-user-img" src="images/01.jpg">
                    <span class="card-bottom-user-name">ユーザー名</span>
                  </div>
                  <div class="col-md-5 pl-0 text-right">
                    50,000円
                  </div>
                </div>
              </div>
            </div>
          </a>
        </li></div></div><div class="slick-slide slick-cloned" data-slick-index="-4" aria-hidden="true" style="width: 135px;" tabindex="-1"><div><li style="width: 100%; display: inline-block;">
          <a href="#" tabindex="-1">
            <div class="card">
              <img class="card-img-top" src="images/04.jpg" alt="カードの画像">
              <div class="card-body">
                <h2 class="card-title">タイトル</h2>
                <div class="row card-bottom-text">
                  <div class="col-md-7 pr-0 text-left d-flex">
                    <img class="card-bottom-user-img" src="images/01.jpg">
                    <span class="card-bottom-user-name">ユーザー名</span>
                  </div>
                  <div class="col-md-5 pl-0 text-right">
                    50,000円
                  </div>
                </div>
              </div>
            </div>
          </a>
        </li></div></div>
....

<script>
$(function() {
  $('.slider').slick({
    /*autoplay:true,*/
    adaptiveHeight: true,
    autoplaySpeed:5000,
    dots:true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 768, //767px以下のサイズに適用
        settings: {
          slidesToShow:1
        }
      }
    ]
  });

  $('.second-slider').slick({
    /*autoplay:true,*/
    autoplaySpeed:5000,
    dots:false,
    infinite: true,
    slidesToShow: 7,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 768, //767px以下のサイズに適用
        settings: {
          slidesToShow:3,
          slidesToScroll: 1,
          initialSlide:0
        }
      }
    ]
  });
});

</script>