CSS: Como alinear horizontalmente dos DIVs sin dejar espacio entre ellos.

La forma mas sencilla que encontré es mediante el uso de la propiedad display:table para el contenedor y display:table-cell para el elemento.

Y para que exista cero espacio entre ellos, en el contenedor se utiliza tambien la propiedad border-spacing:0px

 En el ejemplo el borde rojo representa el ancho de la pagina:

Este es el HTML:

<div id="body">
      <div id="contenedor">
                <div id="elemento">
                         <h3> Elemento 1</h3>
                  </div>
                <div id="elemento">
                          <h3>Elemento 2</h3>
                </div>
       </div>
</div>

El CSS:

#body{
        height: 500px;
        border:2px solid red;
    }
    #contenedor{
        height:300px;
        width: 100%;
        margin:0px;
        display:table;
        border-spacing:0px;
    }
    #elemento{
        height:100%;
        width:50%;
        border: 1px solid black;
        display:table-cell;
    }



Y el resutado:

Elemento 1

Elemento 2