flexを使い子要素を親要素の最大幅まで並べたいです。

Question

前提・実現したいこと

プログラミング初心者で初めて質問させていただきます。
youtubeの模写をしており、動画のサイズを画面幅の25％指定して、1行に４つ貼り付けたいです。

発生している問題・エラーメッセージ

親要素をflex , flex-wrap:wrap;
子要素をwidth:25%;にしたが、右側に余白ができてしまい、中途半端なところで動画の行が改行されてしまいます。

エラーメッセージ

該当のソースコード

ソースコード

.list_video {
display: flex;
flex-wrap: wrap;
margin: -8px;
}

.list_video > li {
width: 25%;
padding: 8px;
}

試したこと

ここに問題に対して試したことを記載してください。
chromeで検証してみましたが、特に問題点が見つかりませんでした。すいません

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

こんにちは。

.list_video > li {
width: 25%;
padding: 8px;
box-sizing:border-box; /* これを追加 */
}

参考：
box-sizing - CSS: カスケーディングスタイルシート | MDN

Comments

[ryuu-]

回答ありがとうございます！理解できました

Answer 2

liを幅25％にした後にpaddingで広げている為、
要素の幅が25％を超えてカラム落ちするのだと思われます。

box-sizing: border-box;をliに設定してあげれば、
paddingが幅25％の内側に効いてご希望の挙動になるかなと。

Comments

[ryuu-]

回答ありがとうございます！理解できました