ТЕКСТ внутри Grid контейнера НЕ ОТВЕТСТВЕННЫЙ

Question

Я не могу понять, почему текст в полях сетки (контейнерах) не адаптируется к размеру экрана.

Я пытался использовать wv, @media, но проблема остается. Сайт, на котором я создаю эту страницу, работает только с CSS, HTML и Java

p /* style for paragraphs */{
  letter-spacing: 0.05em;
  line-height: 1.2em;
  font-size: 1em;
  }
 h2 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: orange;
}
li.spaced {
  height: 10px;
  width: 144px;
  float: left;
}
#circle /* big circle that goes around text */{
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background: moccasin;
  text-align: center;
  padding: 15px 5px 10px 5px;
  font: 14px Arial, sans-serif;
}
#circle2 /* smaller circle that goes around text */{
  border-radius: 50%;
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background: peachpuff;
  text-align: center;
  padding: 25px;
  font: 18px Arial, sans-serif;
}
#highlight /* to highlight important info */{
  padding: 2px;
  background: peachpuff;
}
.boxtext /* this is to create a box around text w/thick line */{
  text-align: center;
  width: auto;
  border: 3px solid orange;
  padding: 5px;
  margin: 2px;
}
.boxtext2  /* this is to create a box around text w/thin line */{
  text-align: center;
  width: auto;
  border: 1px solid orange;
  padding: 20px;
  margin: 10px;
}
.smallboxtext/* this is the end of the box around text */{
  text-align: center;
  background-color: #F9E79F;
  width: auto;
  border: 0px solid orange;
  padding: 5px;
  margin: 2px;
}
.green /* this is to write colored text */{
  text-decoration: underline;
  color: #229954;
  font-weight: bold;
}
.red  {
  text-decoration: underline;
  color: #FF0000;
  font-weight: bold;
}
.blue  {
  text-decoration: underline;
  color: #3498DB;
  font-weight: bold;
}
.purple /* end of colored text */ {
  text-decoration: underline;
  color: #8E44AD;
  font-weight: bold;
}
table /* info for tables */{
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 1.5rem;
}
thead {
  font-weight: bold;
}
tbody {
  font-size: 95%;
  font-style: italic;
}
td, th {
  border: 1px solid rgb(190, 190, 190);
  padding: 10px 20px;
}
th {
  background-color: rgb(235, 235, 235);
}
td {
  text-align: center;
}
.container /* this creates a small/centered container around sections */{
  width: 50%;
}
#wrapper /* this creates a wide container around sections */{
  max-width: 700px;
  height: 200px;
  margin: 0 auto;
  text-align: center;
}
#wrapperGRID /* this creates a RESPONSIVE GRID for 1 2 3 */{
  text-align: center;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  
}
.containNumber /* this a subdiv for number BOXED ELEMENTS */ {
  width: 90%;
  float: left;
  padding: 3px;
  margin: 5px 0px 5px 0px;
  display: block;
  font-size: 4em;
  border: 2px solid orange;
}

.box {
  width: 200px;
  height: 200px;
}
#subDiv /* this a subdiv for elements */ {
  width: 100%;
  float: left;
  padding: 20px 15px 20px 20px;
}
#subDiv1 {
  width: 40%;
  background: orange;
  float: left;
  border: 2px solid orange;
  border-left: 0;
  font-size: 20px;
  padding: 40px 15px 20px 15px;
  margin: 0px 5px 0px 0px;
}
#subDiv2 /* this div is used for inserting brackets */{
  width: 3%;
  float: left;
}
#subDiv3 {
  width: 15%;
  float: left;
  padding: 20px 0px 0px 0px;
}
#subDiv4 {
  width: 30%;
  float: left;
  padding: 20px 15px 20px 20px;
}
.bracketfulleft /* this is the bracket used in personal pronouns */{
  width: 15px;
  height: 180px;
  border: 1px solid orange;
  border-left: 0;
}
.bracketfullright /* this is the bracket used in personal pronouns */{
  width: 15px;
  height: 180px;
  border: 1px solid orange;
  border-right: 0;
}
.bracketbottomleft /* this is the bracket used in personal pronouns */{
  width: 15px;
  height: 180px;
  border: 1px solid orange;
  border-left: 0;
  border-top: 0;
}
.bracketbottomright /* this is the bracket used in personal pronouns */{
  width: 15px;
  height: 180px;
  border: 1px solid orange;
  border-right: 0;
  border-top: 0;
}
.bracketupleft /* this is the bracket used in personal pronouns */{
  width: 15px;
  height: 180px;
  border: 1px solid orange;
  border-left: 0;
  border-bottom: 0;
}
.bracketupright /* this is the bracket used in personal pronouns */{
  width: 15px;
  height: 180px;
  border: 1px solid orange;
  border-right: 0;
  border-bottom: 0;
}
.smtext /* for the smalles print text inside div */{
  font-size: 10px;
  font-style: italic;
}
.medtext /* for smaller print text inside div */{
  font-size: 12px;
  font-style: italic;
}
.bg-text /* to create a big text wataermark box */{
  color: #fff;
  background-color: #ee801e;
  background-image: linear-gradient(to left, #ee801e, #e75b10);
  padding: 20px 20px 100px 20px;
  position: relative;
  left: 30px;
  max-width: 600px;
  overflow: hidden;
}
.bg-text::after /* text inside watermark box */{
  content: attr(data-bg-text);
  display: block;
  font-size: 80px;
  line-height: 1;
  position: absolute;
  bottom: -1px;
  right: 10px;
  color: #fff;
  background-color: #ee801e;
  opacity: 0.1;
  background-image: linear-gradient(to left, #ee801e, #e75b10);
}
.vl /* for vertical lines */{
  border-left: 5px solid orange;
  padding-left: 15px;
}
hr.dotted /* for dotted vertical lines */{
  border-top: 1px dashed orange;
}
.arrow::after /* to add arrow gliph */{
  content: ' \2192';
  display: block;
  position: relative;
  top: -30px;
  left: 15px;
  font-size: 70px;
  color: #000;
}
.arrowDOWN::after /* to add arrow gliph */{
  content: ' \2193';
  display: block;
  position: relative;
  top: -10px;
  left: 5px;
  font-size: 70px;
  color: #000;
}
.arrowUP::after /* to add arrow gliph */{
  content: ' \2191';
  display: block;
  position: relative;
  top: -10px;
  left: 10px;
  font-size: 70px;
  color: #000;
}

@media screen and (min-width: 480px) {
  p {
    font-size: 16px;
  }
}

@media screen and (min-width: 700px) {
  p {
    font-size: 17px;
    line-height: 1.4;
  }
}

@media screen and (min-width: 1024px) {
  p {
    font-size: 19px;
  }
}

h1 {
  font-size: 28px;
}

@media screen and (min-width: 480px) {
  h1 {
    font-size: 31px;
  }
}

@media screen and (min-width: 700px) {
  h1 {
    font-size: 33px;
  }
}

@media screen and (min-width: 1024px) {
  h1 {
    font-size: 36px;
  }
}

<div id="wrapperGRID">
  
  <div style="grid-column: 1 / 3; grid-row: 1 / -1;">
    <u>Pregunta 1:</u>
    <div class="arrowDOWN"></div>
      <i>¿Quién hace<br> la acción?</i>
        <div class="containNumber">1<br>
        <p class="smtext">un pronombre</p></div>
    <div></div>
  </div>
  
<div style="grid-column: 4 / 7; grid-row: 1 / -1;">
  <u>Pregunta 2:</u>
    <div class="arrowDOWN"></div>
      <i>¿Cuál es<br> la acción?</i>
         <div class="containNumber">2<br>
        <p class="smtext">un verbo</p></div>
    <div></div>
</div>
  
  <div style="grid-column: 8 / -1; grid-row: 1 / -1;">
  <u>Pregunta 3:</u>
    <div class="arrowDOWN" style="width: 90%"></div>
      <i>¿Quién recibe<br> la acción?</i>
         <div class="containNumber">3<br>
        <p class="smtext">info adicional</p></div>
      <div style="text-size:10px; width: 90%";>Podemos usar 
      <span id="highlight">más de una mini-pregunta</span>, siempre que
      tenga sentido.<br><i>Por ejemplo:</i>
      </div>
      <div class="arrowDOWN" style="width: 90%"></div>

      <ul id="highlight" style="list-style-type:none; width: 90%";>
        <li >¿qué/quién?</li>
        <li>¿con quién?</li>
        <li>¿para quién?</li>
      </ul>
      </div>
  </div><br><br>
        
<div id="wrapperGRID">

    <div style="grid-column: 1 / 3; grid-row: 1 / 2;">
      Ej. 1:
      </div>


  <div style="grid-column: 4 / 6; grid-row: 1 / 2;">
    <div class="containNumber">1</div>
      <p>She</p>
      <p>He</p>
      <p>We</p>
  </div>
 
  
  <div style="grid-column: 6 / 7; grid-row: 1 / 2;">
    <hr  class="dotted">
  </div>
    
  
  <div style="grid-column: 7 / 9;  grid-row: 1 / 2;">
    <div class="containNumber">2</div>
      <p>is cooking</p>
      <p>is eating</p>
      <p>cooked</p>
  </div>
    
  <div style="grid-column: 9 / 10; grid-row: 1 / 2;">
    <hr  class="dotted">
  </div>
   
  
   <div style="grid-column: 10/ 12;  grid-row: 1 / 2;">
    <div class="containNumber">3</div>
        <p style="width:90%">eggs.</p>
        <p>with them.</p>
        <p style="width:90%">for my mom.</p>
  </div>
</div>

<div id="wrapperGRID">

    <div style="grid-column: 1 / 3; grid-row: 1 / 2; font-size: 30px">
      Ejemplo 2:
      </div>


  <div style="grid-column: 3 / 4; grid-row: 1 / 2;">
    <div class="containNumber">1</div>
      <p style="width:90%">Sfghfghfghfgh</p>
      <p style="width:90%">fghfghfgh</p>
      <p style="width:90%">fgfghfgh</p>
  </div>
 
  
  <div style="grid-column: 4 / 5; grid-row: 1 / 2;">
    <hr  class="dotted">
  </div>
    
  
  <div style="grid-column: 5 / 7;  grid-row: 1 / 2;">
    <div class="containNumber">2</div>
      <p style="width:90%">is cooking</p>
      <p style="width:90%">is eating</p>
      <p style="width:90%">cooked</p>
  </div>
    
  <div style="grid-column: 7 / 8; grid-row: 1 / 2;">
    <hr  class="dotted">
  </div>
   
  
   <div style="grid-column: 8/ 10;  grid-row: 1 / 2;">
    <div class="containNumber">3</div>
        <p style="width:90%">eggs.</p>
        <p style="width:90%">with them.</p>
        <p style="width:90%">for my mom.</p>
  </div>
  
  <div style="grid-column: 10 / 12;  grid-row: 1 / 2;">
    <div class="containNumber">3</div>
        <p style="width:90%">eggs.</p>
        <p style="width:90%">with them.</p>
        <p style="width:90%">for my mom.</p>
  </div>
</div>

Я относительно новичок в кодировании и сейчас чувствую себя совершенно растерянным. HELP ... спасибо !!!