Мне интересно, какой лучший способ поместить пробелы между этими 3 изображениями с помощью CSS с использованием Bootstrap 3 RC2, поскольку в данный момент я не изменяю размеры изображения автоматически, хотя я установил ширину на auto в моем#picture тэг Я хочу, чтобы они были встроены и соответственно изменили размеры изображений.

Вот моя разметка:

<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;
}

Проверь мойскрипка для более четкого представления. Есть ли лучший способ справиться с этим?