title: css padding doesn't working in media
body: <p>I have this css:</p>
  
  <pre><code>ui-tabs .ui-tabs-nav .ui-tabs-anchor {
      float: left;
      padding: .5em 1em;
      text-decoration: none;
  }
  </code></pre>
  
  <p>and this is the css on media</p>
  
  <pre><code>@media only screen and (max-width : 500px) {
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor
  {
      float: left;
      background-color:red;
      padding: 0;
      text-decoration: none;
  }
  }
  </code></pre>
  
  <p>the padding in the media doesn't work, i mean the div still takes that previous padding , However, the background is changing to red. so why the padding still the old value?</p>
  
  <h3>Edit</h3>
  
  <p>This is how it looks in the normal size</p>
  
  <p><img src="https://i.stack.imgur.com/nYADL.png" alt="enter image description here"></p>
  
  <p>This is what it looks when the window changes</p>
  
  <p><img src="https://i.stack.imgur.com/2D52j.png" alt="enter image description here"></p>
  
  <p>This is how it looks when I remove the padding using the firebog</p>
  
  <p><img src="https://i.stack.imgur.com/CX9WI.png" alt="enter image description here"></p>
  
  <h3>html</h3>
  
  <pre><code>&lt;img src="Styles/purpleLogo.gif" style="float:left;"/&gt;
      &lt;div id="newUpContainer" style="width: 100%; float: left;"&gt;
          &lt;div id="onlineBookingDiv" style="float: right; width: 49%;  padding-bottom: 10px;"&gt;
              &lt;div id="tabs"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#tabs-1"&gt;Today&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#tabs-2"&gt;Tomorrow&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#tabs-3"&gt;Any Date&lt;/a&gt;&lt;/li&gt;
                      &lt;li style="float: right; position: relative; right:2px"&gt;
                      &lt;label &gt;
                          &lt;asp:DropDownList AutoPostBack="true" runat="server" ID="mealTimeSelector" OnSelectedIndexChanged="TodayTab_Click"&gt;
                              &lt;asp:ListItem Value="1"&gt;Breakfast&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem Value="2"&gt;Lunch&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem Value="3"&gt;Dinner&lt;/asp:ListItem&gt;
                          &lt;/asp:DropDownList&gt;
                      &lt;/label&gt;
                          &lt;/li&gt;
                  &lt;/ul&gt;
  </code></pre>
  
  <h3>Edit2</h3>
  
  <p>Html from firefox page source</p>
  
  <pre><code>&lt;ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"&gt;
                      &lt;li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true"&gt;&lt;a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"&gt;Today&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false"&gt;&lt;a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2"&gt;Tomorrow&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false"&gt;&lt;a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3"&gt;Any Date&lt;/a&gt;&lt;/li&gt;
                      &lt;li style="float: right; position: relative; right:2px"&gt;
                      &lt;label&gt;
                          &lt;select name="ctl00$MainContent$mealTimeSelector" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$mealTimeSelector\',\'\')', 0)" id="MainContent_mealTimeSelector"&gt;
      &lt;option selected="selected" value="1"&gt;Breakfast&lt;/option&gt;
      &lt;option value="2"&gt;Lunch&lt;/option&gt;
      &lt;option value="3"&gt;Dinner&lt;/option&gt;
  
  &lt;/select&gt;
                      &lt;/label&gt;
                          &lt;/li&gt;
                  &lt;/ul&gt;
  </code></pre>