全体にbox-sizing: border-box;設定。
min-width:900px;・・・900より「小さくならない」 padding:10px; 「body * 」にてbox-sizing: border-box;
当然1200pxとかにはなる
box01,width:100%;　padding:10px × 2 だけ減って880px:
box02,width:900px; ブラウザ幅が920px未満になるとはみ出る
body直下に設置　880padding:0,margin:0
body直下　900px

半角文字だと改行されない

aaaaaaaaaaaaaaaaaaaaaa 10px幅（テキストがはみ出る）

width:900px; padding:20px;

display: block; width:900px; はみ出る
width:100%; 「検証」で幅は「860px」と確認できる。
100px

以下display:inline-block;で横並び。
HTMLコード上で改行していると隙間ができる。支援ソフトが自動で改行を解除する場合があり、気づかないことも

100px100px 100px 100px 100px 100px 100px 100px 100px 100px
100px
divタグ
100px
divタグ

フレックス（display:flex;） で横並び（幅は100px）

900px　body直下に設置

見出しタグh2　幅１００％

float;: left;

100px foat
100px f
100px f
100px f

hrにclear:both;でfloat解除。基本はfloatさせている要素を内包している親boxに指定する。widthを100%にしているのでそもそも回り込まないためこれで。

100px100px