スライダー画像の下が切れてしまう。

WordPress 5.8.2
ロリポップサーバー
テーマ　独自

メイン画像にスライダーをインラインフレームで入れ込んでいます。
画面両端いっぱいに画像を広げる形にしたいのですが、何度かCSSを修正しているうちに
スライダー画像の半分下が切れている状態になりました。
元々の画像はwidth 1400px height 500px です。
4通りやりましたが、変わりません。　どうすればいいのでしょうか？
HTML
<div><iframe class=”iframe” src=”https://shj-co.com/wp-content/themes/sample/nivo/demo/demo.html&#8221; frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”style=”border-color:#000000; scrollbar-base-color: #ccff99;　
scrollbar-arrow-color: #0000ff;” ></iframe></div>

CSS
１、

.iframe {
width: 100%;.
height: 500px;
padding-top: 100px;
}

２、

.iframe {
width: 1400px;.
height: 500px;
padding-top: 100px;
}

３、

.iframe {
width: 100%;.
height: auto;
padding-top: 100px;
}

４、

.iframe {
width: 100%;.
height: 100%;
padding-top: 100px;
}