¿Cómo agrego un margen entre las columnas de bootstrap sin envolver [duplicar]

Esta pregunta ya tiene una respuesta aquí:

¿Cómo agrego espacio entre columnas en Bootstrap? 22 respuestas

Mi diseño actualmente se ve así

En la columna central, quiero agregar un pequeño margen entre cadaServer Div. Pero, si agrego un margen al CSS, termina el ajuste de línea y se ve así

<div class="row info-panel">
    <div class="col-md-4 server-action-menu" id="server_1">
        <div>
            Server 1
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_2">
        <div>
            Server 2
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_3">
        <div>
            Server 3
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_4">
        <div>
            Server 4
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_5">
        <div>
            Server 5
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_6">
        <div>
            Server 6
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_7">
        <div>
            Server 7
        </div>
    </div>
</div>

Y el CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
}

.info-panel {
    padding: 4px;
}

Intenté agregar los márgenes haciendo esto

.info-panel  > div {
    margin: 4px;    
}

¿Cómo puedo agregar un margen a los DIV para que no dejen tanto espacio en el lado derecho?

Respuestas a la pregunta(5)

Su respuesta a la pregunta