title: responsive website using descendant selectors
body: <p>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.</p>
  
  <p>The page is responsive when i use this code:</p>
  
  <pre><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% ;
  
      }
     }
  </code></pre>
  
  <p>whenever i use this code, the page is longer responsive:</p>
  
  <pre><code>.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% ;
  
      }
     }
  </code></pre>
  
  <p>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?</p>