slick.js 要素が左に寄っています。

実現させたいこと

動画をスライドで表示させ、2枚目のスライドから始まり、左右にスライドできる画面を実装しています。

できないこと

スライドさせる要素が全体的に左寄りになっていてます。原因がわかりません。
ご教授お願いいたします。

ソース

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <title>Document</title>
7    <link rel="stylesheet" type="text/css" href="./slick-1.8.1/slick/slick.css" media="screen" />
8    <link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
9    <link rel="stylesheet" type="text/css" href="./slick-1.8.1/slick/slick-theme.css" media="screen" />
10    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
11    <script src="./slick-1.8.1/slick/slick.min.js"></script>
12</head>
13
14<body>
15    <div class="slider">
16
17        <div id="video_01"></div>
18        <div id="video_02"></div>
19        <div id="video_03"></div>
20    </div>
21
22</body>
23<style>
24    *,
25    *:before,
26    *:after {
27        -webkit-box-sizing: border-box;
28        -moz-box-sizing: border-box;
29        -o-box-sizing: border-box;
30        -ms-box-sizing: border-box;
31        box-sizing: border-box;
32    }
33
34    .slider {
35        border: solid 1px #000;
36        width: 1400px;
37        height: 420px;
38        padding: 0;
39    }
40
41    #video_01,
42    #video_02,
43    #video_03 {
44        display: inline-block;
45        border: solid 1px red;
46        /*
47        margin: 0 40px;*/
48        width: 800px !important;
49        height: 420px !important;
50    }
51
52    .slick-next {
53        right: 370px;
54        z-index: 99;
55    }
56
57    .slick-prev {
58        left: 140px;
59        z-index: 100;
60    }
61
62    /*
63    .slick-track {
64        width: 1500px !important;
65    }*/
66
67</style>
68
69<script>
70    $(function() {
71        $('.slider').slick({
72            infinite: false,
73            initialSlide: 1,
74            dots: false,
75            slidesToshow: true,
76            cssEase: 'ease-in-out',
77            centerMode: true,
78            centerPadding: '220px',
79            slidesToshow: 1,
80        })
81    })
82
83
84
85
86    // Load the IFrame Player API code asynchronously.
87    var tag = document.createElement('script');
88    tag.src = "https://www.youtube.com/player_api";
89    var firstScriptTag = document.getElementsByTagName('script')[0];
90    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
91
92    var ytplayer = []
93
94    var ytData = [{
95        id: 'b4YLo74OWfY',
96        area: 'video_01'
97    }, {
98        id: 'IGInsosP0Ac',
99        area: 'video_02'
100    }, {
101        id: 'bFHcgBfZEq0',
102        area: 'video_03'
103    }]
104
105    function onYouTubePlayerAPIReady() {
106
107        var ytHeight = 600,
108            ytWidth = 300
109
110        for (let i = 0; i < ytData.length; i++) {
111            ytplayer[i] = new YT.Player(ytData[i]['area'], {
112                width: 'ytWidth',
113                height: 'ytHeight',
114                videoId: ytData[i]['id'],
115                playerVars: {
116                    rel: 0,
117                    autoplay: 0,
118                    showinfo: 0
119                },
120            });
121        }
122    }
123
124</script>
125
126</html>