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

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;
  }
  }