slickでスマホ表示が崩れてしまう

お世話になっております。

問題点

slickを使用したスライドショーで、スマホで表示崩れが起こってしまいます。
以下、問題のスクリーンショットです。
*情報を黒字で隠してあります
*青線がsp表示の右端です。

画像のように、スライド領域が青線を超えてしまっていることが原因で表示が崩れています。

理想

sp表示の幅に、スライド領域が収まるようにしたいです。

コード

javascript
1$('.slider').slick({
2        centerMode: true,
3        centerPadding: '300px',
4        focusOnSelect: true,
5        dots: true,
6        accessibility: true,
7        initialSlide: 1,
8        infinite: true,
9        variableWidth: true,
10        focusOnSelect: true,
11        prevArrow: '<div class="slider-arrow slider-prev"><img src="oooo"></div>',
12        nextArrow: '<div class="slider-arrow slider-next"><img src="oooo"></div>',
13        responsive: [{
14            breakpoint: 480,
15            settings:{
16                centerPadding: '0px',
17                focusOnSelect: true,
18                centerMode: true,
19                variableWidth: false
20            }
21        }]
22    });