title: Background-color not applied on class selector
body: <p>This is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.game-navbar li {
    padding: 10px;
    margin-right: 1em;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #02884e;
    color: white;
    font-size: 13px;
    letter-spacing: 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="game-navbar"&gt;
    &lt;ul&gt;
      &lt;li id="active"&gt;Status&lt;/li&gt;
      &lt;li&gt;Points&lt;/li&gt;
      &lt;li&gt;Pick Team&lt;/li&gt;
      &lt;li&gt;Transfers&lt;/li&gt;
      &lt;li&gt;Leagues &amp; Cups&lt;/li&gt;
      &lt;li&gt;Fixtures&lt;/li&gt;
      &lt;li&gt;The Scout&lt;/li&gt;
      &lt;li id="podcast"&gt;Podcast&lt;/li&gt;
      &lt;li&gt;Stats&lt;/li&gt;
      &lt;li&gt;Prizes&lt;/li&gt;
      &lt;li&gt;Help&lt;/li&gt;
      &lt;li&gt;Draft&lt;/li&gt;
      &lt;li&gt;Sign Out&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Now, what I want to achieve is to have one active li item with white background and one with red. When I try to add classes to them and select them accordingly, background-color is not applied. If I add id and select them in appropriate manner, all CSS styles are applied. Why?</p>