3 div sur une même row de la même couleur BOOTSTRAP

Bonjour à tous!!

J'ai 3 div de la même couleur (et qui doivent être de la même taille) à mettre sur une même ligne mais le hic c'est qu'elles se collent.

Du coup on ne les distingue pas du tout!


Est ce que je peux mettre des margin?
J'ai testé mais c'est pas concluant.

Voici le code

        <div class="row">
        	<div class="col-lg-8 col-lg-offset-2" style="padding-top:30px;">
                <div class="rectangle col-lg-4">
                	<div class="texte_encadre_noir">300 x 160px</div>
                </div>
                <div class="rectangle col-lg-4">
                	<div class="texte_encadre_noir">300 x 160px</div>
                </div>
                <div class="rectangle col-lg-4">
                	<div class="texte_encadre_noir">300 x 160px</div>
                </div>
            </div>
        </div>

et les deux classes :

.rectangle {
	height:160px;
	background-color:#353535;
	margin-bottom:40px;
	display:table;
}


.texte_encadre_noir {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	color:#fff;
	display:table-cell; 
	vertical-align:middle; 
	width:100%; 
	margin:0 auto; 
	text-align:center;
}

Si quelqu'un a une idée...

Merci d'avance!
Modifié par oceane751 (28 Jan 2015 - 09:23)

Hello,
je pense qu'il faut ajouter un float:left, puis un margin-right

.rectangle {
    height: 160px;
    background-color: #353535;
    margin-bottom: 40px;
    display: table;
    float: left;
    margin-right: 5px;
}