スマホで表示すると、headerの右側に余白ができてしまう

Question

前提・実現したいこと

html, cssでポートフォリオを作りました。メディアクエリを使用してスマホで確認したところ、headerの右側に少し余白ができてしまいました。
その余白を無くしたいです。

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

headerの右側に少し余白ができてしまいました

該当のソースコード

html

<header class="header"> <div class="container"> <div class="icon">

css
body{
color: #333;
font-family: verdana,sans-serif;
/* margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px; */
margin: 0px;
}

img {
max-width: 130%;
height: auto;
}

header {
background-color: #efefef;
padding-top: 32px;
padding-bottom: 32px;
/* width: 100%; */
}

.container{
/* background-color÷ /
width: 400px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
/ overflow: hidden; */
}

試したこと

cssを少し変えてみました。

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

html、css

Answer 1

こちらでいかがでしょうか?

body {
  overflow-x: hidden;
}

---

そのほか考えられることとしては以下です。

img {
  max-width: 130%; /* はみ出す原因かも知れません。いったん100%にしてみてください */
}

あと念のため、HTML側が↓そのままだとしたら、閉じタグがないです。
また<img>がないため、<img>が原因の場合、正確にお返事ができていない可能性があります。

<header class="header">
<div class="container">
<div class="icon">