responsive website using descendant selectors

问题

im trying to make my website responsive using media queries, however the page is not responding when i used the descendant selector in certain parts of me code.

The page is responsive when i use this code:

.div1{
  float: left;
  width:20%;
  height: 200px;
  background-color:red;
  border: 1px solid #f2f2f2;
  margin-left: 2%;
  border-radius: 50%;
}


.div2{
   float: left;
   width:20%;
   height: 200px;
   background-color:yellow;
   border: 1px solid #f2f2f2;
   margin-left: 2%;
   border-radius: 50%;
   }



 .div3{
     float: left;
     width:20%;
     border-radius: 50%;
     height: 200px;
     background-color:blue;
     border: 1px solid #f2f2f2;
     margin-left: 2%;
     }



  /* media queries*/
   @media screen and (max-width:800px) {
  .sec1 div{
   width:40% ;

    }
   }

whenever i use this code, the page is longer responsive:

.sec1 .div1{
  float: left;
  width:20%;
  height: 200px;
  background-color:red;
  border: 1px solid #f2f2f2;
  margin-left: 2%;
  border-radius: 50%;
}


.sec1 .div2{
   float: left;
   width:20%;
   height: 200px;
   background-color:yellow;
   border: 1px solid #f2f2f2;
   margin-left: 2%;
   border-radius: 50%;
   }



 .sec1 .div3{
     float: left;
     width:20%;
     border-radius: 50%;
     height: 200px;
     background-color:blue;
     border: 1px solid #f2f2f2;
     margin-left: 2%;
     }



  /* media queries*/
   @media screen and (max-width:800px) {
  .sec1 div{
   width:40% ;

    }
   }

Notice the difference bewteen the codes is the addition of the class sec1 before the div classes (before the media query). My question is, why doesn't the latter code work?

来源：https://stackoverflow.com/questions/50542256/responsive-website-using-descendant-selectors