CSS Positioning without using float poperty
<p>Can u look this <a href="http://codepen.io/gslv/pen/VmyEvR?editors=1100" rel="nofollow noreferrer"><strong>link</strong></a>?</p>

<p>Why there <strong>div</strong> are not align each of on side by side? and why there a gap between them? or here is code in body </p>

<p>I know there a lot of another way to solve this but in this case what is the problem going on?</p>

<p><strong>what is the solution in this prticular case?</strong></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>*{margin:0;padding:0;box-sizing:border-box;}

/*main{background:magenta;padding:10px 0px;text-align:center}*/
main{background:magenta;padding:10px 0px;text-align:left}

div{display:inline-block;background:blue;min-height:50px;
width:calc(100% / 3)}


/*issue:- positioning div without using float poperty**

*/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;

&lt;div class="child"&gt;&lt;/div&gt;
  &lt;div class="child"&gt;&lt;/div&gt;

  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/main&gt;</code></pre>
</div>
</div>
</p>

<p>and in  css</p>

<pre><code>&lt;style&gt;
    *{margin:0;padding:0;box-sizing:border-box;}

    main{background:magenta;padding:10px 0px;text-align:left}

    div{display:inline-block;background:blue;min-height:50px;width:calc(100% / 3)}
&lt;/style&gt;
</code></pre>