title: can't change <li> elements displayed as a table-cell to a block element and change it's width
body: <p>I have a <code>&lt;ul&gt;</code> with a width of 100% acting like a table and two <code>&lt;li&gt;</code> elements inside with a background-image in them,  both acting like a table-cell and each <code>&lt;li&gt;</code> has a width of 50%. I want to change the <code>&lt;li&gt;</code> to display as a block element at a media query breaking point and to be shown at 100 percent width instead. This won't work. 
  This is the <code>HTML</code>: </p>
  
  <pre><code> &lt;section id="features"&gt;
  
  &lt;h1&gt;The Functionality&lt;/h1&gt;
  
  &lt;ul class="main-links"&gt;
  
  &lt;li style="background-image: url(img/test2.jpg);"&gt;&lt;div&gt;Some text&lt;/div&gt;&lt;/li&gt;
  
  &lt;li style="background-image: url(img/test1.jpg);"&gt;&lt;div&gt;more text and even more text&lt;/div&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  
  
  &lt;/section&gt;
  </code></pre>
  
  <p>And this is the css(Im using SASS):</p>
  
  <pre><code>#main #features {
    background-color: #fff;
    overflow: hidden;
  }
  
  #main #features ul {
    display: table;
    width: 100%;
  }
  
  #main #features ul li {
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-position: center top;
    height: 350px;
    list-style: none;
    display: table-cell;
    width: 50%;
  }
  </code></pre>
  
  <p>And finally the media query: </p>
  
  <pre><code>@media screen and (min-width: 760px) and (max-width: 980px) {
  
    #features .main-links {
      width: 100%;
      border: solid 2px red;
    }
  
    #features li {
      border: solid 2px lime;
      width: 100%;
      display: block;
    }
  
  
    .contact-info {
      display: none;
    }
  }
  </code></pre>
  
  <p>The only thing getting override is the border...What am I missing? Appreciate the help</p>