slickでスライダーを作ったときにレイアウトが崩れてしまう

前提・実現したいこと

コーディング初心者です。
模写コーディングを行っており、中央に大きめなスライダーを作りたいです。

発生している問題・エラーメッセージ

slickを用いて作ろうとした時に大きく右側にずれてしまいます。解決方法がわからず困っています。

エラーメッセージ

該当のソースコード

	<body>
    	<header>
    		<ul>
    			<li>NEW IN</li>
    			<li>COLLECTION</li>
    			<li>LOOKBOOK</li>
    			<li id="logo">LAMINA</li>
    			<li>OUR STORY</li>
    			<li>NEWS</li>
    			<li>STORES</li>
    		</ul>
    	</header>

    	<div class="top-wrapper">
    		<ul class="slider">
    			<li><img src="img/lamina_01.jpg"></li>
    			<li><img src="img/lamina_02.jpg"></li>
    			<li><img src="img/lamina_03.jpg"></li>
    		</ul>
    	</div>
		

		<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
		<script src="js/slick.min.js"></script>
		<script src="js/main.js"></script>   
	</body>

html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

li {
	list-style: none;
}

body {
	width: 1600px;
}

header {
	height: 96px;
	padding-left: 244px;
	padding-right: 260px;
	font-family: Bodoni URW;
}

header li {
	float: left;
	padding-right: 46px;
	padding-top: 44px;
	padding-bottom: 41px;
	color: #777777
}

#logo {
	font-size: 36px;
	padding: 37px 97px 34px 100px;
	color: #111111
}



.top-wrapper {
	box-sizing: 1600px 712px;
}

.slider li {
}

$('.slider').slick();

試したこと

sliderクラスに対してpadding, marginをいじってみても変化ありません

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1header {
2    height: 96px;
3    padding-left: 244px;
4    padding-right: 260px;
5    font-family: Bodoni URW;
6    display: flow-root; /* これを追加 */ 
7    /* overflow: hidden; または、これを追加でもよい */ 
8}