レスポンシブにしたときに左右に余計な隙間ができる、というか飛び出ちゃう時

CSSでは残念なことに、親要素でサイズを指定しても、子要素の大きさがはみ出るほど大きければ、全体のサイズははみ出てしまう。

親要素で600pxに指定しても、子要素が何らかの理由で右に30pxはみ出していれば、全体長さは630pxになってしまうということ。
親要素でいくらmarginを0にしようが、paddingを0にしようが関係ない。子要素が少しでもはみ出してしまえば無駄になる。

だから、全ての要素をチェックして、飛び出る要素が無いか確認しないといけない。Chromeの「検証」で、カーソルを動かすだけでパッパッと要素を示してくれるヤツを使って、探していくのが早いかもしれない。

そもそも、スマホの画面サイズは幅360pxとかなのだが、スマホブラウザでWebページを開くと、デフォルトで幅が980pxに合うようになっている。
つまり、幅980pxと指定して作った要素が、ちょうど360pxの画面サイズに収まるように表示されるということ。
そして、980pxより大きい分は横スクロールで表示されるようになる。
まずは、Webページ内の主要な情報が980pxに収まるようにしてWebページを作ろう。それ以外の左右の余白はただのデザインという感じで。

そうすれば、中途半端なサイズのタブレットなどでは幅が980pxに収まるように表示されるはず。例えば、1280pxで作ると、タブレットでも多少横スクロールしないと見えないサイトになってしまう。

そして、スマホ対応にするときには、幅を980pxにするのではなく、100vwとして指定しなおす。

そして、その子要素はそれをもとに%で指定していく。
pxは、端末ごとに多少サイズが変わってもおかしくないような、各オブジェクト内の文字サイズとか隙間のサイズとかに使うとよい。

文章などの文字サイズなどは、ユーザーが見やすいように、端末によってあまり実寸を変えたくないので、あえてpxにする。画面サイズが違っても文字サイズ自体はあまり変わらないからだ。

ブラウザの幅に100%そろえるような画像では、画面サイズに合わせるので、widthにはpxは向かない。