title: text align justify not working on element generated by add_shortcode
body: <p>This is the weirdest problem I have ever encounter in my whole life, I've been debugging it for almost 5 hours as I have a very long code until I got to this and realize that the reason its not working is because of how the HTML code was generated.</p>
  
  <p>Just check this page, <a href="http://sites.symmetricsweb.com/" rel="nofollow">http://sites.symmetricsweb.com/</a></p>
  
  <p>First box HTML code is the same with the second box,</p>
  
  <p>However, text align justify is not working on the second box,</p>
  
  <p>The first box html code is added using page editor </p>
  
  <pre><code>&lt;div class="checs"&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>while the second box is generated using add_shortcode functionality, </p>
  
  <pre><code>add_shortcode('test_short','my_function');
  function my_function() {
      ob_start();
      echo '&lt;div class="checs"&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;';
      return ob_get_clean();
  }
  </code></pre>
  
  <p>but If you examine the HTML source, you won't see any difference,</p>
  
  <p>I don't really need a solution to this as there are many ways I know to separate the boxes evenly, I just wanted to know what is the reason why <code>text-align:justify</code> is behaving this way. </p>
  
  <p>Would appreciate any good explanation.</p>
  
  <p>Thanks</p>