Container query issue

Hi Am building a shopping cart here: https://stage.dembetheatre.org/cart.php I have some nice grid and flex working inside container queries on the <section class="basket"> I have a nested header element and cart items all in a subgrid I have allocated the first cell a width of 300px BUT The continer query is not recognising the .basket items in the @container: @container (min-width: 768px) { .basket { grid-template-columns: 300px 1fr 1fr 100px; grid-template-rows: auto; } } @container (min-width: 1200px) { .basket { grid-template-columns: 300px 1fr 1fr 100px 60px; grid-template-rows: auto;} } Also in min-width:1200 this is not working either .bkheader span:nth-of-type(3) { grid-column: 4 / span 2; } I cannot figure out why the container is ignoring .basket and why the last header item will not span the 2 columns!!!