サイトの幅を小さくした時の表示が明らかにおかしい

Question

自分は現在、模写コーディングのに取り組んでいるのですが、レスポンシブ化の部分で詰まってしまいました。

https://hemmi-ge.com/

上記のサイトの模写コーディングを行っているのですが、パソコンでこのサイトの画面の幅を小さくすると横のスクロールバーが出てきます。

しかし、Googlechromeの検証ツールでDementions:Responsiveにして画面の幅を小さくしてみると、横スクロールバーが出てきません。

この時に、

上記のスクリーンショットの右の要素（胃内視鏡検査・大腸内視鏡検査のテキスト部分）にwidthが485pxと指定がされているのですが、検証ツールで横幅が800pxほどで見てみるとcssで485pxが適用されているのですが明らかに485pxに見えません。全体の幅が800pxならばこの要素は全体の半分以上の幅を占めていないとおかしいと思うのですがなぜこのようなことが起きているのでしょうか。

分かる方に教えていただきたいです。

Answer 1

<meta name="viewport" content="width=device-width">

ヘッダーのViewport の指定により、自動で縮小されるなどのスケーリングが発生しているからです。