Eu estou querendo saber qual é a melhor maneira de colocar espaços entre essas 3 imagens com CSS usando Bootstrap 3 RC2 como o que eu fiz no momento não é redimensionar automaticamente as imagens, mesmo que eu tenha definido a largura para auto no meu#picture tag de id. Eu desejo que eles b inline e redimensione as imagens de acordo.

Aqui está minha marcação:

<div class="container">
    <div class="row">
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
    </div>
</div>

CSS:

.container {
    max-width:1000px;
    background-color:white;
}
body {
    background-color:cyan
}
#picture {
    width:auto;
    /*margin-left:10px; */
    /*margin-right:10px; */
}
.col-lg-4 {
    margin-left:10px;
    margin-right:10px;
}

Verifique meuViolino para uma visão mais clara. Existe uma maneira melhor de lidar com isso?