slickスライダーを使用したfvに余白をつけると横のスクロール発生＆画面を縮めると下に謎の余白ができる。

Question

前提・実現したいこと

dreamweaverを使っています。slickのスライダーをつかってfvをスライドさせました。
fvの周りに白い幅を囲むようにつける。heightはviewportに合わせたいです。ディスプレの横幅を縮めると横の白い幅（余白）はそのままだけど、スライダーの画像ははみ出た分はカットして縦幅にあわせてあげたいです。

該当のソースコード

html
<ul class="slider your-class">
    <li><img src="images/home/fv01.jpg" alt="〇〇〇"></li>
    <li><img src="images/home/fv02.jpg" alt="〇〇〇"></li>
    <li><img src="images/home/fv05.jpg" alt="〇〇〇"></li>
</ul>

<nav>
    <ul class="nav nav-header">
	   <li class="nav-item"><a href="">〇〇〇</a></li>
	   <li class="nav-item"><a href="">〇〇〇</a></li>
	   <li class="nav-item"><a href="">〇〇〇</a></li>
	   <li class="nav-item"><a href="">〇〇〇</a></li>
    </ul>	
</nav>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

<script type="text/javascript">
	$(function(){
	  $('.your-class').slick({
	  autoplay: true,
	  /*dots: true,*/
	  infinite: true,
	  speed: 500,
	  fade: true,
	  cssEase: 'linear'

	  });
	});
	
 </script>

css
.slider{
	height: 98vh;
	overflow: hidden;
	padding: 0 50px;
	position: relative;
}

.nav-header{
	position: absolute;
	top: 0;
	width: 100vw;
	padding: 23px 0;
	text-align: right;
	background-color: #fff;
	z-index: 10;
}

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

周りの白い幅は、左右については.sliderにpaddingでつけました。上下の白い幅は、（上）navigationに上下paddingで余白でpositionで上部に浮かせてつけてます。下の余白はheight98vwをしてみましたがpcのメニューバーに隠れて見えなくなります。(macではどんな風に見えるんですかね....)
overflow:hiddenをつけているのに横のスクロールも発生してしまっています。
そして、画面の横幅を少し小さくしてみようとすると、fvの下に謎の余白ができます。（dreamweaverのプレビューでは）
ファイルを直接chromeで開くと、次のスライドが見えてます。

Comments

[Lhankor_Mhy]

・「fvの周りに白い幅を囲むようにつける」とのことですが、fvとは具体的にはどの要素のことですか？img要素ですか？

・「謎の余白」について具体的にお願いします。.sliderの高さをかなり高くとっていますから、下に余白ができるのは自然かと思いますが……

[hanayammmm]

書き方が分かりにくくてごめんなさいTT!
firstviewのところなんですが、クラス名で言うと.slider.your-classがついている箇所です。

謎の余白についてです↓
※まず、.sliderのheightに98vwと記載間違えしていました。自分のファイルでの記載は98vhとしています。
1.dreamweaverのプレビューで開いた場合
ブラウザを小さくしたりせずに、画面いっぱいで見ているときは大丈夫なのですが、ブラウザの横幅を小さくしたりすると、.sliderが縦横比率を維持したまま小さくなっていって次の要素との間に隙間ができるんです。

2.htmlファイルから直接chromeで開いた場合
スライダーが動きません。ブラウザを小さくすると、通常スライダーで次に表示される二番目の画像が下から見えてきます。

1.2ともにブラウザの画面いっぱいで見ている通常状態でも横スクロールが発生します。overflow hiddenはつけてます！

説明が下手で大変申し訳ないです。伝わりますか？

[Lhankor_Mhy]

「次の要素」というのは、navの下にある要素、みたいな感じですか？

[hanayammmm]

そうです！こちらにはのせてないのですが、ｈ2とかｐとかのみでしかマーク付けしておらず、余白なども無しです。

[Lhankor_Mhy]

では、回答にも書きましたが、heightが大きすぎるのだと思いますよ。

[hanayammmm]

なるほど、とても理解できました。ありがとうございます！

Answer 1

とりあえず横スクロールは、

.nav-header{
    margin: 0;
    width: 100%;
}

で消えるかもしれません。

---

謎の余白については、ちょっと情報が不足していて、どの部分のことなのかわからないでいます。たぶん、heightが大きすぎるだけだと思うのですが……