Почему grid контейнер не умещается в основной контейнер с контентом?

Как сделать чтобы контент не вылазил за пределы основного (мобильного) контейнера, вот такого:

.container{
        max-width: 306px;
        
        overflow-x: hidden;
    }

grid контейнер сделан вот так:

grid-template-areas: 
        "sub1" 
        "sub2" 
        "sub3"
        "video";
        grid-column-gap: 0px;
        grid-row-gap: 0px;