Unable to override text-align: justify with text-align: left in simple HTML

Question

I have an odd issue with the text-align: left 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 says text-align: left is active, text-align: justify is inactive, but it is NOT rendering the left align.

Here is my code: https://jsfiddle.net/h0vx9sLc/3/ (updated Fiddle with "fix")

body { width: 100px; }
p:nth-child(1) {  }
p:nth-child(2) { text-align: justify; }
p>span { text-align: left !important; }

<p>
    <span>Testing Blah Blah Blah Blah Blah</span>
</p>
<p>
    <span>Testing Blah Blah Blah Blah Blah</span>
</p>

Based on the CSS priority there really is no chance the justify property has a higher priority than left. I tested this in Chrome, Firefox, and IE and all are doing the same thing.

Here is the screen shot of Chrome claiming the left property is active, but it isn't.

Answer 1

Ok, this is a VERY bizarre property of CSS.

I figured it out with the help of this question: text-align justify, cannot override

Apparently an inline element IGNORES text-align CSS, but it can INHERIT them. So my SPAN was inheriting the justify, but CSS rendering IGNORES the text-align CSS of an inline element.

To fix it, I add display: inline-block; to my span. Really, really bizarre. I'm not sure what to make of the Chrome developer issue. I guess it should technically be a bug?