仕上がりイメージからレイアウトをコーディングするとき、マージンやボーダーなど横幅の計算がややこしくて手こずっていました（涙）
そんな悩みを解消してくれるありがた〜いセレクタ「box-sising」！
いちいち個別の要素に設定するのが面倒なので、全ての要素に適用させておく設定を調べてみました。
全ての要素にBorder-boxを適用する *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box }
セレクタの *（アスタリスク）は「全ての要素に対して適用させる」という意味。
疑似要素に対しても指定しておくのが良いとのこと。
また、古いバージョンのブラウザに対応させるために、念のためベンダープレフィックスもつけておくとベター。
参照サイト：https://saruwakakun.com/html-css/reference/box-sizing