webサイトのレスポンシブ化をしたら要素が画面からはみ出した。

Question

レスポンシブ化したい

今模写コーティングをしています。
@media screen and (max-width: 500px){
（今ここをつっくています）
}

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

ヘッダーが画面をはみ出してしまいます
下の画像の通り
html body 画面の幅は　411pxにもかかわらずheaderのはばがなぜか475pxになってしまいます（画面をはみ出す）

該当のソースコード

長すぎてここには載せられないので
[リンク内容](http://plsk.net/questionOfAyatch)
に乗せときます。
### 試したこと

いろいろ試した結果。position:fixedとすると画面からはみ出すみたいです。（逆にこれを消すとはみ出ない）。

###お願い

なぜはみ出してしまうのかその原理を教えてください。また、解決策を教えてくれると助かります。

###追記
containerを削除してもheaderの大きさはbodyをはみ出た状態(Google Developer tool より)なのでcontainerは関係ありません。(と思います)

Answer 1

mainの中にはみ出している要素がある影響のようです。
他にもまだあるかもしれませんが、一応。

@media screen and (max-width: 500px){
  .step li {
      padding: 0;
  }

  .benefit-container {
      padding: 0;
  }

Comments

[退会済みユーザー]

ありがとうございます。できましたo((>ω< ))o

Answer 2

これが効いているのでは。widthでなくmax-widthにでもすればよいのでは。

.container {
    width: 1170px;
}

Comments

[退会済みユーザー]

試してみましたができませんでした

[kei344]

https://jsfiddle.net/a8g0t24L/ では提示されていない部分の問題ではないでしょうか。

[退会済みユーザー]

すみません＞︿＜
どういうことですか？

[kei344]

提示のコードでは問題が再現しませんよ、ってことです。

[退会済みユーザー]

なるほど、分かりました。ありがとうございます。(ヘ･_･)ヘ
では質問を修正します

[kei344]

.tel-btn のpaddingが大きすぎるのとimg要素にmax-widthが指定されていない問題がありますね。
とはHTMLのタグがおかしい箇所とかタグの対応（開始タグと閉じタグ）が取れていないとかそういう箇所を修正する必要があると思います。
https://jsfiddle.net/u1pjf3z4/

[退会済みユーザー]

ありがとうございます。できましたo((>ω< ))o

Answer 3

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

.container {
  max-width: 100%; /* 追加 */
  width: 1170px;
  /* 後略 */
}

Comments

[退会済みユーザー]

できませんでした。（；´д｀）ゞ