前提・実現したいこと

はじめに、max-widthを1020pxにしたサイトを作り、
今レスポンシブ対応に直しているところです。
画面幅を縮めると、display:flexを設定した要素のみ、縮んで右側に余白ができてしまいます。
（flexbox自体が左の枠外にはみ出して、少しの親要素と、
親要素からはみ出して子要素の右側だけが画面に見えている感じのものと、
ただ左端に縮んだものがあります。)
スマホサイズにすると、大体画面の2/3は余白になっています。
全てのコンテンツが画面内に収まるようにしたいです。

試したこと

・bodyタグの直下に、全体を包むdivを作り、overflow:hiddenする。
・bodyのwidthを100%にする。
・bodyにmin-widthを設定する。

よろしくお願いします。

追記(参考コード)

html

css
body {
margin: 0;
padding: 0;
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
overflow-x: hidden;
min-width: 100%;
}

.container 1{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
min-height: 450px;
background-image: url(img/main.png);
background-position: center;
background-size: cover;
width: 100%;
}

.container 2{
display: flex;
max-width: 1020px;
margin-left: auto;
margin-right: auto;
}

container 1は、画面幅一杯に表示しているヒーロー画像用のsectionのcontainerで、container 2が普通のコンテンツページです。
私自身、どこが問題なのか分かっていないため、必要だと思われる部分を書き出しましたが
他に必要な箇所があれば教えていただけると助かります。

追記２

すみません。先ほど、質問を取りやめると書いたのですが、今晩もう一度追記し直します。
丁寧なアドバイスありがとうございます。

spookybird

2018/09/04 13:04

再現できるコードをください。エスパーじゃないんでこれだけではわかりません。

liveasnotes

2018/09/04 15:35

質問を編集した際は，通知を送る設定にしておいてください．あとコードは囲ってください（コードブロックで囲われていると，シンタックスハイライトがついて読みやすいだけでなく，コピーボタンもコード右上に付くので，コピペして検証しやすい）

yoshinavi

2018/09/04 20:23

＞必要だと思われる部分を書き出しましたが･･･　→　不足しています。レイアウト不具合に関する質問の場合、不具合が再現するHTMLとCSS（場合によってJS）が提示されないと回答者は検証が出来ません。質問内容と提示コードに、誤記述を考慮しても、違いがあり過ぎです。

yoshinavi

2018/09/04 22:28

＞実際の全部のコードは載せられない･･･　→　全部載せる必要はありません。不具合が再現するコード部分だけです。

yoshinavi

2018/09/04 22:39

不具合の原因のひとつに、各コードの誤記述（誤字脱字等）もあるので併せて見直されると良いです。また、提示コードの他に、不具合箇所のキャプチャー画面やイメージ図もあると、皆さんから回答をもらい易くなるかと思います。

行動規範の内容に同意します

回答1件

現段階でエスパー（笑）した感じだと，flexboxの子要素が全体的に左に寄っていて，かつ子要素のwidthが縮んでて，最左端は親要素からも突き抜けている（※①）ということらしいですが，子要素のflex-shrinkやmargin，親要素のpadding等はどうなっているのでしょうか？

※①イメージ

あと，以下を試したとのことですが，

bodyタグの直下に、全体を包むdivを作り、overflow:hiddenする。
bodyの**widthを100%**にする。
bodyにmin-widthを設定する。

この対応方法を見る限り，もしかして，flexboxの使い方もよく理解できていないのではないでしょうか？
flexboxについては，下記のページなどを参考にしてみてください

CSS Flexbox の各プロパティの使い方を詳しく解説

とりあえず，実物を見ないと確かなことは何も言えないので，HTML・CSSの両方を抜粋・掲載してください
抜粋する際は，そのコードをコピペするだけで状況を再現できる最小単位にしぼってください
動作確認はliveweave等ですれば良いかと思います
また各要素のスタイリングも，必要のないものは極力省いてください（その過程で原因が見つかることもあります）
それからコードは，以下のようにコードブロックで囲って載せるようにしてください

質問文は編集できるので，詳細が分かれば随時，内容・タイトルを更新してください

追記(20180905)

掲載されたコードをコピペしたものです

属性値はちゃんと"で囲ってください．「閉じ」が抜けています
bodyのheight二重指定はいらないです．あと!importantもできるだけ使わない方が良いです
jsもですが，cssのクラス名・id名の先頭に数字は使えないですし，.や#なしに名前を入れると要素扱いされるので，.container 1や.container 2は，.containerクラスの子孫要素の「<1>タグ」または「<2>タグ」にスタイリングしていることになります（そんなものは当然ない（文法違反である）ので，これは不正なコードとして，処理されません．注釈を入れたいなら/* こんなふうにコメントアウトしてください */．あと，セレクタに空白を入れると，子孫要素を指定する記述の意味になるので注意してください）

container 1は、画面幅一杯に表示しているヒーロー画像用のsectionのcontainer

HTMLと矛盾しています．掲載されたHTMLでは<section>こそが.containerのcontainer（入れ物）になっています．（HTMLの.containerのスタイルの記述が.container 1であるというなら意味は通りますが，分かりにくいので，cssの記述はHTMLに合わせてください）

container 2が普通のコンテンツページです。

HTMLに当該の記述が見当たりません．再現できないので，この文章が蛇足であるか，説明の不足・コードの欠落であると推測されます

必要だと思われる部分を書き出しました

「思われる」ではなく，実際に検証したうえで，きちんと確認をとれた(過去完了形の方の)コードを掲載してください．確認方法としてliveweave等のオンラインエディタを利用してはどうかという提案はすでにしました．何らかの理由でそれができないのであれば，理由も追記してください

そして示されたコードを手直ししたものが以下です

（HTMLとCSSの整合性だけを重視している（質問者さんの意図は把握していない）ので，この書き換えが正しいかは分かりませんが，.container 1は.containerに，.container 2は.contentsにして，各要素に背景色を付けています）