slick スライダーで、 画面からはみ出る、矢印が見えない、原因と解決方法

/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

/* 途中省略  */

.slick-prev:before,
.slick-next:before {
  font-family: 'slick';　//スタイル変更の為、'FontAwesome'に修正します
  font-size: 20px;
  line-height: 1;
  opacity: .75;
  color: #ffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

/* 途中省略  */

.slick-prev:before {
  content: '←';　//font-familyの変更に伴いこちらも修正します
}

/* 途中省略  */

.slick-next {
  right: 25px;
}

/* 途中省略  */

.slick-next:before {
  content: '→';　//font-familyの変更に伴いこちらも修正します
}

/* 以下省略  */

  $(document).ready(function(){
    $('.slick-slider').slick({
      arrows: true,  //前後画像への切り替え矢印を表示
      autoplay: true,　
      autoplaySpeed: 5000,
      dots: true,
    });
  });

.slick-prev, .slick-next {
  &:before {
    font-family: 'FontAwesome';
    text-shadow: 1px 2px 2px #777;  //適度な暗さのグレーを設定していますが、お好みの色を選択してください
    font-size: 30px;
  }
}
.slick-prev {
  left: 10px;  //画像の外側から内側に配置
  z-index: 10;  //画像の前面に配置、因みに.slick-nextの方は記載不要でした
  &:before {
    content: '\f053'; //左向きの矢印
  }
}
.slick-next {
  right: 10px;  //画像の外側から内側に配置
  &:before {
    content: '\f054';  //右向きの矢印
  }
}