title: How to use media queries properly
body: <p>I am designing a responsive web page. I have a div whose width should decrease when the screen size decreases. </p>
  
  <p>This div also contains a list of two image links. They should remain inline even when the screen width decrease.</p>
  
  <pre><code>/* The CSS */
  div.mymenu{
  margin-right:7%;
  margin-top:-53px;
  background:#000;
  width: 28.5%;
  opacity:0.8;
  }
  
  div.mymenu &gt; .nav-pills{
  margin-bottom:7px;
  }
  
  div.mymenu &gt; .nav-pills a{
  color:#fff;
  margin-left: 30%;
  }
  
  div.mymenu &gt; .nav-pills a:hover{
  background:none;
  } 
  
  &lt;!-- The HTML --&gt;
  
  &lt;div class="mymenu pull-right"&gt;
              &lt;ul class="nav nav-pills"&gt;
                  &lt;li&gt;&lt;a href=""&gt;Why Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;&lt;img src="img/news.png" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;&lt;img src="img/help.png" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I am using twitter bootstrap. I tried making changes to bootstrap-responsive.css - but no change. I made changes such as :-</p>
  
  <pre><code>@media (min-width: 768px) and (max-width: 979px) {
  .mymenu{
   width: 20%;
  }
  }
  </code></pre>