デバイスごとの画像サイズについて。。。

Question

前提・実現したいこと

初心者です。。。
メイン画像をスライダーショーにしました。PC用とレスポンシブで同じ様に表示したいのですが、
各サイズ感で混乱しています。
今の状態は21インチのワイド画面で、画面の3分の２くらいに表示されていて
他の11インチのノートPCだと縦横にスクロールが出てしまいます。ナビ部分は全体に表示されているので、
画像とナビの大きさがズレてしまっています。
携帯でみると画面は表示されますが、微妙に横にズレてしまいます。どの画面でも画面いっぱいに見れるように
したいのですが、実現できません。どの様にすれば良いでしょう。。。

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

エラーメッセージ

該当のソースコード

HTML
<meta name="viewport" content="width=device-width,initial-scal=1">

<div id="slideshow"> <img class="slide" src="../pics/arvo-earth-line.png"> <img class="slide" src="../pics/arvo-solution-line.png"> </div>

CSS
body {
line-height:1.5em;
margin:0;
font-family:"メイリオ","ＭＳ Ｐゴシック",sans-serif;
max-width:1240px;
width:100%;
}
#slideshow {
width:100%;
max-width:100%;
position: relative;
height:270px;
margin:0;
padding:0;
}
.slide{
position:absolute;
top: 0;
left:0;
z-index: 8;
opacity:0 0;
}

@media screen and (min-width: 1400px)
.mainnav {
width: 100%;
}
@media(max-width: 768px){

試したこと

メディアクエリでは、メイン画像のCSSを書いていませんが、
携帯では、画面幅いっぱいにみれてます。若干ずれていますが。。。
よろしくお願いします。。。

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

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

Comments

[m.ts10806]

ソースコードはマークダウンのcode機能を使ってください。質問・解説内容とコードとの境目が不明瞭となりますし、code機能では正しくコードをコピペできるようになりインデントもつけられて読みやすくなり、再現確認も容易となりますので、的確な回答が得やすくなります。https://teratail.com/help#about-markdown

[m.ts10806]

またレスポンシブにおける「画面」とはモニターのサイズではなくブラウザのhtml表示部分を指します。そのあたりは認識問題ないですか？

[yurim]

画面サイズは、ブラウザのサイズと認識しています。JSのメイン画像が可変しない感じです。携帯用サイズは検索で見つける事は出来たのですが、デバイスごとに可変する方法が不明瞭でした。画像だけが可変しないのは何かが足りないのかな？と思っていました。よくわからない説明ですみません。

[m.ts10806]

最初のコメントで指摘した内容もご対応いただければと。この提示方法では正しく再現確認がとれませんので。（質問は編集できます）

[yurim]

色々試してみました。一部でWidthの間違いの様な気がしてきました。

[m.ts10806]

あれ？通ってないですかね。「質問を編集してコードをマークダウン対応してください」です。質問自体の修正依頼であって何か試してくださいという依頼ではありません。

Answer 1

画面横幅いっぱいということでしたら以下のようにやればできます。

.slide{ ~~~ }

に以下を追加

width: 100%;