目的

ポートフォリオ用のサイトをレスポンシブ対応したが、スマホから表示すると右側に謎の余白ができてしまう
それをなんとかしたい

ちょっと見づらいけど右側に余白ができている

解決法

test.html

<body>
  <div id="wrapper"> <!-- ←これを追加する -->
    <div>
     ....
    </div>
  </div>
</body>

もともとの機能を包んで、そいつの代わりに矢面に立ってくれるやつのこと

javaのラッパークラスなどのように元クラスを包み込むイメージでしょうか
今回は下のdiv要素全体を包み込んでいる感じですかね

test.css

#wrapper {
  overflow: hidden;
}

overflow …… はみ出た要素の表示方法を指定する
hidden
内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない

ラッパーで包んだ下のdiv要素の余白を非表示にする、という感じですね

右側の余白が消えていることを確認する