これはなに
Webページを作成する際、よくCSSでサイズを指定することがあります。
こうしたサイズ（特に幅）の指定をするときに、なるべく固定値を指定しない方が良い理由とおすすめの指定方法を紹介します。
なぜ固定値をサイズに使わない方がいいのか
画面のサイズが変わったときや要素に変化があったときに表示が崩れてしまう可能性があるためです！
例えば、
width: 400pxが指定されている画像を画面幅が375pxのデバイスで見るときにはみ出してしまう
width: 200pxが指定されているボタンで、ラベルを長くするとテキストがはみ出してしまう
どう指定すると良いのか
親要素からはみ出してしまうのを防ぐ
widthを100以下の%で指定することで、親要素より大きくなることを防ぐことができます。
画面幅に対してであれば、ビューポートに対しての相対サイズを指定できるvw, vhも使えます。
特定の幅にしたい場合は、その値をmax-widthで指定し、widthは100%で指定しておけば、親要素が特定の幅より余裕がある時はその幅で、はみ出してしまうような時は親要素に収まるサイズになります。
子要素がはみ出してしまうのを防ぐ
大きさをpaddingで確保することで防ぐことができます。
特定の幅にしたい場合は、min-widthで指定することで、万が一要素が大きくなった時はサイズが大きくなるのではみ出すことを防げます。