主題のiPhoneX以降のあたりのデバイスで横向き（landscape）にした際、
左右に白い余白が見えちゃう問題とその解決策
画面の比率が違う
iPhoneX以降、表示領域が画面いっぱい（縦横比19.5:9）と
カメラからタッチパネル部分までの表示領域(縦横比16:9)の
2タイプが主流の昨今ですが、画面の縦横比が異なるが為に
如何にメディアクエリでフルレスポンシブ対応をしていようと
横向きに傾けた時に左右に余白ができてしまう場合があります。
横向き対応をしていなくてもサイトの表示には問題ないのですが
ごく稀にこの横向きでも画面いっぱいに表示させてほしいと言われることがあります。
画面いっぱいに表示させる方法
htmlファイル側のhead内のviewportにviewport-fit=coverを追加します。
index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
これでiPhoneX以降の横向きの際、画面いっぱいに表示することができます。
セーフエリアも意識する
横いっぱいに表示できるようになったものの
このままだと触った場所によっては変にページリンクに飛んでしまったりと
思わぬ操作を引き起こしてしまいます。
そうならないように横向きいっぱいにする際は
セーフエリアを確認しつつenv()やpaddingなどで余白を作りレイアウトを調整をお勧めします。