title: responsive web design media query width not changing
body: <p>I am working on making a page responsive, by changing div <code>width</code> according to the size, but except  width every property I am able to change, <code>width</code> is not changing at all. </p>
  
  <p>My code for HTML and styling the elements</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  #main div {
    width: 100%;
  }
  @media screen and (max-width: 700px) {
    #red {
      display: none;
    }
    body {
      background-color: yellow;
    }
    #blue {
      width: 75%;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="main"&gt;
      &lt;div id="red" style="background-color: red;"&gt;RED COLOR&lt;/div&gt;
      &lt;div id="blue" style="background-color: blue;"&gt;BLUE COLOR&lt;/div&gt;
      &lt;div id="green" style="background-color: orange;"&gt;GREEN color&lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the code I tried, but except <code>width</code> every property I am able to change How do I change the <code>width</code> property?</p>