title: Side by side divs with no gap?
body: <p>I am referring to this Fiddle I found on SO that uses <code>display: inline-block;</code> and I have applied it to my own work but I can't figure out how to get the two divs to sit flush side by side, not with the 3-4px gap?</p>
  
  <p><a href="http://jsfiddle.net/zygnz/1/" rel="nofollow">http://jsfiddle.net/zygnz/1/</a></p>
  
  <p>I've tried:</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="left"&gt;
              LEFT
          &lt;/div&gt;
          &lt;div class="right"&gt;
              RIGHT
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>div.left {
      background:blue;
      height:200px;
      width:300px;
  }
  
  div.right{
      background:green;
      height:300px;
      width:100px;
  }
  
  .container{
      background:black;
      height:400px;
      width:450px;
  }
  
  .container div {
      display: inline-block;
  }
  </code></pre>
  
  <p>But got nothing.</p>