title: text-align: right on a span inside li tag
body: <p>my structure looks like this:</p>
  
  <pre><code>&lt;ul class="grupa-playerow"&gt;Blabla
      &lt;li class="player-li"&gt;Layout1&lt;span class="player-godziny"&gt;15.00-17.00&lt;/span&gt;&lt;/li&gt;
      &lt;li class="player-li"&gt;Layout2&lt;span class="player-godziny"&gt;17.00-22.00&lt;/span&gt;&lt;/li&gt;
      &lt;li class="player-li"&gt;Layout3&lt;span class="player-godziny"&gt;22.00-24.00&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and here goes the style:</p>
  
  <pre><code>.grupa-playerow {
  position: relative;
  width: 300px;
  list-style-type: none;
  padding: 7px 0 7px 0;
  border-bottom: 1px solid #CDCDCD;
  font-size: 11px;
  cursor: pointer;
  }
  
  
  .player-li {
  padding: 2px 0 2px 20px;
  width: 100%;
  text-align: left;
  }
  
  .player-godziny {
  text-align: right !important;
  color: #5ACFC9;
  }
  </code></pre>
  
  <p>I would like .player-godziny span to align to the right. Why isn't it working?</p>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/wL2SF/" rel="noreferrer">http://jsfiddle.net/wL2SF/</a></p>