フレックスボックスでつくったレイアウトが崩れます

フレックスボックスでつくったレイアウトが崩れます。

左のラインに均等にそろえたいのに、左に隙間が広がってずれてしまいます。

CSSは下記です

@charset "utf-8";

/*デフォルト*/
*{box-sizing: border-box;}
a{
  color:#000;
  text-decoration:none;
}
li{
  list-style-type:none;
}
/*共通要素*/
.btn_login{
  color:blue;
  font-size:14px;
  height: 38px;
  display:inline-flex;
  align-items: center;
  padding: 0 15px 0  45px;
  border: 1px solid blue;
  border-radius:2px;
  position:relative;
}
.btn_login:before{
  content:"";
  display:block;
  width:28px;
  height:28px;
  border-radius:50%;
  background:gray;
  position:absolute;
  top:50%;
  left:15px;
  transform: translateY(-50%);
  }
/*ヘッダー*/
.header{
 height: 60px;
 
}
.header >.container {
  padding:0 20px;
  height:60px;
  display:flex;
  align-items:center;
}
/*バーガー*/
.button_burger{
 
  width:40px;
  height:40px;
  background:gray;
}

/*ロゴ*/
.area_logo_header {
  margin:0 0 0 10px;
}
.area_logo_header .logo{
  display: block;
  width: 80px;
  height: 30px;
  background: gray;


}
/*フォームヘッダー*/
.form_header{
  margin:0 auto;
}


/*ナビ_ヘッダー*/
/* .nav_header {
  margin:0 0 0 auto;
} */
.list_nav_header{
  display:flex;
}
.list_nav_header li +li {
  margin:0 0 0 10px;
}
.list_nav_header a:not(.btn_login){
  display:block;
  width:40px;
  height:40px;
  background:gray;
  
}
/*サイドバー*/
.sidebar{
   flex:0 0 240px;
}
.sidebar .box{
  padding:10px 0;
}
.sidebar .box +.box{
border-top:1px solid #ccc;
}
/*サイドバーナビリスト*/
.list_nav__sidebar a{
  font-size:14px;
  
  display:flex;
   align-items: center;
  height: 40px;
  padding:0 0 0 60px;
  position:relative;
}
.list_nav__sidebar a:before{
content:"";
display:block;
width:28px;
height:28px;
border-radius:50%;
background:gray;
position:absolute;
top:50%;
left:24px;
transform: translateY(-50%);
}
/*サイドバーログイン*/
.area_register_sidebar{
  padding: 10px 30px;
}
.area_register_sidebar .description{
 font-size:14px;
 line-height:1.5em;
}
.area_register_sidebar .wrap_btn {
 margin-top:10px;
}
/*メイン*/
.main{
  background: peachpuff;
  flex:auto;
  min-width:10px;
  padding:24px;
}
.main .box {
  padding:30px 0;
}
.main .box  +.box{
border-top:3px solid #ccc;
}
.main .box  .ttl{
  font-size:24px;
  }
/* ビデオリスト*/
.list_video{
  display:flex;
  flex-wrap:wrap;
  margin:-8px;
}
.list_video >li{
  padding:8px;
 
width:25%;
}
/*サムネイル　投稿画像　*/
.list_video .thumb{
  width:100%;
  background:gray;
}
.list_video .thumb:before{
  content:"";
  display:block;
  width:100%;
  padding-top:56.25%;
}
/*レイアウト*/
.list_video .layout{
 display:flex;
}

/*アイキャッチ*/
.list_video .eye{
  flex:0 0 40px;
}
.list_video .img{
    width:100%;
  border-radius:50%;
  background:gray;
}
.list_video .img:before{
 content:"";
 display: block;
 width:100%;
 padding-top:100%;

}

/*レイアウト*/
.list_video  .layout{
display:flex;
margin:10px 0 0;
}




/*アイキャッチ*/
.list_video  .eye{
  flex:0 0 40px;
  margin:0 10px 0 0;
}
.list_video .img{
  width:100%;
  border-radius:50%;
  background:green;
}
.list_video .img:before{
  content:"";
  display:block;
  width:100%;
  padding-top:100%;
  


}
/*テキスト*/
.list_video　.text{
flex:auto;
min-width:10px;
}
.list_video　.text .ttl{
font-size:15px;
}
.list_video　.text .user{
font-size:14px;
}
.list_video　.text .count{
font-size:13px;
}
/*ページレイアウト*/
.layout_page{
  display:flex;
}



box-sizing:border-box;を設定しただけでは駄目でした。

どうすれば均等に並ぶのでしょうか？

テスト環境
html ソースは載せると長くなり投稿できないので
テスト環境のリンク掲載します。
[リンク内容](https://best-trust.biz/practice/youtube/)

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLのアウトラインを抜き出すと下記のような感じになってます。

html
1<main class="main">
2    <div class="box">
3        <ul class="list_video">
4            <li></li>
5            <li></li>
6            <li></li>
7            <li></li>
8            <main class="main">
9                <div class="box">
10                    <ul class="list_video">
11                        <li></li>
12                        <li></li>
13                        <li></li>
14                        <li></li>
15                        <main class="main">
16                            <div class="box">
17                                <ul class="list_video">
18                                    <li></li>
19                                    <li></li>
20                                    <li></li>
21                                    <li></li>
22                                    <main class="main">
23                                        <div class="box">
24                                            <ul class="list_video">
25                                                <li></li>
26                                                <li></li>
27                                                <li></li>
28                                                <li></li>
29                                            </ul><!-- /.list_video -->
30                                        </div><!-- /.box -->
31                                    </main>
32                                </ul>
33                            </div>
34                        </main>
35                    </ul>
36                </div>
37            </main>
38        </ul>
39    </div>
40</main>