title: Css id's don't change on media queries
body: <p>My media query isn't updating properly. Here is test html:</p>
  
  <pre><code> &lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
          &lt;title&gt;Test &lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="row"&gt;
              &lt;div id="verde" class="col-5"&gt;
                  &lt;h2&gt;Lorem Site&lt;/h2&gt;
                  &lt;h3&gt;Test Site&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
  &lt;div class="col-12"&gt;
      &lt;p&gt;Bacon ipsum dolor sit amet pastrami ribeye sausage, sirloin short ribs pork belly strip steak tenderloin boudin. Landjaeger beef ham hock, doner bacon pork belly filet mignon tenderloin short loin beef ribs tongue. Bresaola salami short ribs venison, pastrami jerky landjaeger. Hamburger meatball cow pork loin ham. Sirloin tail venison jerky kevin. Turducken ribeye sirloin fatback tenderloin short loin. Boudin sirloin tail venison filet mignon rump leberkas landjaeger bacon shank beef ribs ground round. Tail boudin landjaeger rump, chuck shankle leberkas pork belly pork tongue brisket short ribs ground round. Strip steak jowl pork loin beef ribs, ribeye tail spare ribs rump&lt;/p&gt;
  &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
  
  &lt;div id="verde" class="col-4"&gt;
                  &lt;p&gt; Col 4Bacon ipsum dolor sit amet pastrami ribeye sausage, sirloin short ribs pork belly strip steak tenderloin boudin. Landjaeger beef ham hock, doner bacon pork belly filet mignon tenderloin short loin beef ribs tongue. Bresaola salami short ribs venison, pastrami jerky landjaeger. Hamburger meatball cow pork loin ham. Sirloin tail venison jerky kevin. Turducken ribeye sirloin fatback tenderloin short loin. Boudin sirloin tail venison filet mignon rump leberkas landjaeger bacon shank beef ribs ground round. Tail boudin landjaeger rump, chuck shankle leberkas pork belly pork tongue brisket short ribs ground round. Strip steak jowl pork loin beef ribs, ribeye tail spare ribs rump&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="verde" class="col-4"&gt;
                  &lt;p&gt;Bacon ipsum dolor sit amet pastrami ribeye sausage, sirloin short ribs pork belly strip steak tenderloin boudin. Landjaeger beef ham hock, doner bacon pork belly filet mignon tenderloin short loin beef ribs tongue. Bresaola salami short ribs venison, pastrami jerky landjaeger. Hamburger meatball cow pork loin ham. Sirloin tail venison jerky kevin. Turducken ribeye sirloin fatback tenderloin short loin. Boudin sirloin tail venison filet mignon rump leberkas landjaeger bacon shank beef ribs ground round. Tail boudin landjaeger rump, chuck shankle leberkas pork belly pork tongue brisket short ribs ground round. Strip steak jowl pork loin beef ribs, ribeye tail spare ribs rump&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-4"&gt;cOL4
                  &lt;p&gt;Bacon ipsum dolor sit amet pastrami ribeye sausage, sirloin short ribs pork belly strip steak tenderloin boudin. Landjaeger beef ham hock, doner bacon pork belly filet mignon tenderloin short loin beef ribs tongue. Bresaola salami short ribs venison, pastrami jerky landjaeger. Hamburger meatball cow pork loin ham. Sirloin tail venison jerky kevin. Turducken ribeye sirloin fatback tenderloin short loin. Boudin sirloin tail venison filet mignon rump leberkas landjaeger bacon shank beef ribs ground round. Tail boudin landjaeger rump, chuck shankle leberkas pork belly pork tongue brisket short ribs ground round. Strip steak jowl pork loin beef ribs, ribeye tail spare ribs rump&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my CSS</p>
  
  <pre><code>    @media screen and (max-width:760px){
       #verde{
          color:red;
      }
  }
  *{
      border: 1px solid red !important;
  }
  *{
      box-sizing:border-box;
  }
  
  p {
      margin: 10px;
  }
  #verde{
      color:green;
  }
  .row{
      width: 100%;
      margin:auto;
      display: flex;
      flex-wrap:wrap;
  }
  .col-1{
      width: 8.33%;
  }
  .col-2{
      width: 16.66%;
  }
  .col-3{
      width: 25%;
  }
  .col-4{
      width: 33.33%;
  
  }
  .col-5{
      width: 41.66%;
      margin-left:auto;
  }
  .col-6{
      width: 50%;
  }
  .col-7{
      width: 58.33%;
  }
  .col-8{
      width: 66.66%;
  }
  .col-9{
      width: 75%;
  }
  .col-10{
      width: 83.33%;
  }
  .col-11{
      width: 91.66%;
  }
  .col-12{
      width: 100%;
      margin-left:20%;
  }
  </code></pre>
  
  <p>Now,in the media query i want to change the id #verde to the color red.
  This method don't work,it only works if i am more specific for example i use</p>
  
  <pre><code> body #verde
  </code></pre>
  
  <p>or I specific the class and the id.
  The question is
  Why it works only if i'm more specific?</p>
  
  <p>Thanks in Advance</p>