Two columns inside container

What I want to do is have a <div> with a container class and a fixed width, holding a <div> with the block class to prevent other content encroaching on any uneven blank space, then two columns (<div>'s) side-by-side inside the block, and to be 50% of the width of the block.

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.

I have an example here of what I have so far, and here if the code:

<html>
<head>
<title>Columns</title>
<style>
    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;
}
</style>
</head>
<body>
<div class="container">
<div class="block">

    <div class="col left">
        <h1>Left</h1>
    </div>

    <div class="col right">
        <h1>Right</h1>
    </div>

</div>
</div>
</body>
</html>

Solution

Try replacing these classes:

.block {
    background: none repeat scroll 0 0 #555555;
    display: block;
    overflow: auto;
    width: 100%;
}

.col {
    width: 49%;
    float: left;
    background: #333;
}