How would I make one container in a grid change to 100% width on mobile? - html

Question

I have 8 elements in a grid. On a desktop screen they appear properly.
I want element-3 to hide at max-width: 885px and element-2 to expand to width: 100%. I have tried the below code but my element-2 is not expanding to width: 100%.
My CSS is:
.container{
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4,1fr);
grid-gap: 1rem;
}
.box {
order: 2px solid black;
background-color: aqua;
padding: 10px;
}
.box:first-child{
grid-column-start: 1;
grid-column-end: 5;
}
.box:nth-child(2){
grid-column-start: 1;
grid-column-end: 4;
}
.box:nth-child(3){
grid-column-start: 4;
grid-column-end: 5;
}
.box:nth-child(4){
grid-column-start: 1;
grid-column-end: 5;
}
.box:nth-child(5){
grid-column-start: 1;
grid-column-end: 3;
}
.box:nth-child(6){
grid-column-start: 3;
grid-column-end: 5;
}
.box:nth-child(7){
grid-column-start: 1;
grid-column-end: 5;
}
.box:last-child{
grid-column-start: 1;
grid-column-end: 5;
}
#media only screen
and (max-width: 885px) {
.box:nth-child(3){
display: none;
}
#item2{
width: 100%;
}
}
And my HTML body tag is :
<div class="container">
<div class="box">Item-1</div>
<div class="box">Item-2</div>
<div class="box">Item-3</div>
<div class="box">Item-4</div>
<div class="box">Item-5</div>
<div class="box">Item-6</div>
<div class="box">Item-7</div>
<div class="box">Item-8</div>
</div>
I have just started learning the grid and media queries.

Answer 1

this is working as expected:
#media only screen
and (max-width: 885px) {
.box:nth-child(3){
display: none;
}
.box:nth-child(2){
grid-column-start: 1;
grid-column-end: 5;
}
}