title: Unable to override text-align: justify with text-align: left in simple HTML
body: <p>I have an odd issue with the <code>text-align: left</code> not working after the element has inherited a justify property.  I even tried using the !important keyword and it's still not working.  The odd thing is, if I use developer mode in Chrome, it <strong>says</strong> <code>text-align: left</code> is active, <code>text-align: justify</code> is inactive, but it is NOT rendering the left align.</p>
  
  <p>Here is my code:  <a href="https://jsfiddle.net/h0vx9sLc/3/" rel="nofollow noreferrer">https://jsfiddle.net/h0vx9sLc/3/</a>  (updated Fiddle with "fix")</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { width: 100px; }
  p:nth-child(1) {  }
  p:nth-child(2) { text-align: justify; }
  p&gt;span { text-align: left !important; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
      &lt;span&gt;Testing Blah Blah Blah Blah Blah&lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;span&gt;Testing Blah Blah Blah Blah Blah&lt;/span&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Based on the CSS priority there really is no chance the <code>justify</code> property has a higher priority than <code>left</code>.  I tested this in Chrome, Firefox, and IE and all are doing the same thing.</p>
  
  <p>Here is the screen shot of Chrome claiming the left property is active, but it isn't.</p>
  
  <p><a href="https://i.stack.imgur.com/c7CKA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c7CKA.png" alt="enter image description here"></a></p>