responsive website using descendant selectors

Question

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?