title: How do I add a margin between bootstrap columns without wrapping
body: <p>My layout currently looks like this</p>
  
  <p><img src="https://i.stack.imgur.com/XSuLL.png" alt="Current Layout"></p>
  
  <p>In the center column, I want to add a small margin between each <code>Server</code> Div. But, if I add a margin to the CSS, it ends up line wrapping and looking like this</p>
  
  <p><img src="https://i.stack.imgur.com/XNvPt.png" alt="Attempted Change"></p>
  
  <pre><code>&lt;div class="row info-panel"&gt;
      &lt;div class="col-md-4 server-action-menu" id="server_1"&gt;
          &lt;div&gt;
              Server 1
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 server-action-menu" id="server_2"&gt;
          &lt;div&gt;
              Server 2
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 server-action-menu" id="server_3"&gt;
          &lt;div&gt;
              Server 3
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 server-action-menu" id="server_4"&gt;
          &lt;div&gt;
              Server 4
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 server-action-menu" id="server_5"&gt;
          &lt;div&gt;
              Server 5
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 server-action-menu" id="server_6"&gt;
          &lt;div&gt;
              Server 6
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 server-action-menu" id="server_7"&gt;
          &lt;div&gt;
              Server 7
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>I attempted to add the margins by doing this</p>
  
  <pre><code>.info-panel  &gt; div {
      margin: 4px;    
  }
  </code></pre>
  
  <p>How can I add a margin to the DIVs so that they don't leave so much space on the right hand side?</p>