ECサイトのスマホ表示の際の表示崩れ

Question

前提・実現したいこと

ECサイトのトップページを、スマホ表示した際にデザインが崩れないように表示したいです。
該当のサイトはこちらです↓
https://shopping.geocities.jp/gentil-shop/

※上記にスマホでアクセスすると、スマホ専用ページで表示しますか？と出てきますが、いいえを選択した際の表示です。

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

横幅は1100pxの指定なのですが、スマホ表示した際に、検証ツールで確認するとhtmlの横幅が980pxとなっており、
ヘッダーのドロップダウンメニューとフッターだけが横幅980pxまでしか表示されておらず、表示が一部欠けた状態となってしまいます。

試したこと

↓こちらの表記を追加してみましたが、画面幅に合わなかったため、非表示にしました。
<meta name="viewport" content="width=device-width, initial-scale=1.0">

解決方法についてご回答いただけますと大変助かります。
よろしくお願い致します。

Answer 1

おそらくスマホ時、ブラウザが自動で横幅を判別しているのですが、うまく判別できずbody要素の横幅を980pxとしているようです。
PCサイトのhead内にだけ

<!--スマホでの横幅を1100pxに指定-->
<meta name="viewport" content="width=1100,initial-scale=1">

を記載できれば解決されると思います。

Comments

[ec-]

すぐにご回答頂けて大変助かりました！ありがとうございます。

<meta name="viewport" content="width=1100,initial-scale=1">
↑こちらだと欠けた部分の表示は直ったのですが、拡大されて表示されてしまったので、

<meta name="viewport" content="width=1100">
↑こちらの表記にしたところ、スマホでも横幅ぴったりに欠けることなく表示ができました。