8 cells of 300px in two rows for flex in bootstrap. Why doesn't it fit?

Question

css

Why doesn't 4 cells of 300px fit into bootstrap's "container"?
One is transferred even if you make 295px.
But the main question is: How to make
XL with flexbox bootstrap 4 cells in two rows
LG MD 2 cells in 4 rows
SM 1 cell in eight rows

spoiler

.colcol {

width:300px;
height:300px;
border: 1px solid black;

       }

<div class="container">
<div class="row d-flex flex-row justify-content-center" >

       <div class="colcol"></div> 
       <div class="colcol"></div> 
                 
       <div class="colcol"></div> 
       <div class="colcol"></div> 
              
       <div class="colcol"></div> 
       <div class="colcol"></div> 
                 
        <div class="colcol"></div> 
       <div class="colcol"></div> 
        
       </div>
</div>

Answer 1

Because 1200 is greater than 1140.
https://getbootstrap.com/docs/4.0/layout/grid/#gri...