質問は、表題の通りなのですが、calc(100% - 16px - 16px)の表示で- 16pxを2つ記入する必要がある意味が分からないので、教えていただけると助かります。

左と右の余白をそれぞれ示しているのだと思い、試しに、- 16pxのところを- 32pxに変更し、

calc(100% - 32px - 16px)

や

calc(100% - 16px - 32px)

としてみたところ、どちらの記述の場合も左右両方に32px(16pxの倍くらい)の余白ができたように見えました。

検証で幅の数値を確認しようとしましたが、marginではないので表示されませんでした。また、calc(100% - 16px)としてみたところ、余白が半分くらいになり、左右に8pxずつの余白ができたように見えました。

MDNでも、「余白をつけてオブジェクトを画面に配置する」のところで「バナーの両側とウィンドウの縁は 40 ピクセル空けます」とあり、.bannerに 「width: calc(100% - 80px);」と記載されています。

https://developer.mozilla.org/ja/docs/Web/CSS/calc#positioning_an_object_on_screen_with_a_margin

そこで、16pxの余白にしたい場合は、calc(100% - 32px)にすればよいのではないかと思ったのですが。なぜ、calc(100% - 16px - 16px)と表示するのか教えていただけますと幸いです。

どうぞよろしくお願い致します。