title: Two columns inside container
body: <p>What I want to do is have a <code>&lt;div&gt;</code> with a <code>container</code> class and a fixed width, holding a <code>&lt;div&gt;</code> with the <code>block</code> class to prevent other content encroaching on any uneven blank space, then two columns (<code>&lt;div&gt;</code>'s) side-by-side inside the <code>block</code>, and to be 50% of the width of the <code>block</code>.</p>
  
  <p>When I create this, I get what appears to be a margin after the first block, which I do not want. I want the block to pack up tight, no margins.</p>
  
  <p>I have an example <a href="http://www.scottydawg.co.uk/web_dev/columns.htm" rel="nofollow">here</a> of what I have so far, and here if the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Columns&lt;/title&gt;
  &lt;style&gt;
      div {
          margin: 0;
          padding: 0;
  }
      .container {
          background: #DDD;
          width: 1200px;
          margin: 0 auto;
          padding: 2% 0;
  }
      .block {
          background: #555;
          width: 100%;
          display: block;
  }
      .col {
          width: 49%;
          display: inline-block;
          background: #333;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div class="block"&gt;
  
      &lt;div class="col left"&gt;
          &lt;h1&gt;Left&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="col right"&gt;
          &lt;h1&gt;Right&lt;/h1&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>