Leerraum zwischen Medium-7 und Medium-5 auf der gleichen Linie mit Foundation

Question

Ich brauche Hilfe mit einigen einfachen Styling von zwei Boxen, die ich versuche zu machen. Ich brauche etwas Leerraum zwischen ihnen. Ich benutze Foundation und habe eine Box gemacht, die Medium-7 füllen sollte und eine andere, die Medium-5 füllt.

Ich brauche nur etwas Leerraum zwischen ihnen, aber es scheint nicht zu tun.

Code:

<div class="main-container"> 
       <div class="row gutter"> 
        <div class="column small-12 medium-7 color border-right"> 
         <div class="row"> 
          <div class="column small-12"> 

          </div> 
         </div> 
        </div> 
        <div class="column small-12 medium-5 color border-left"> 
         <div class="row"> 
          <div class="column small-12"> 

          </div> 
         </div> 
        </div> 
       </div> 
</div> 

Css

.color { 
    background-color: #F2F2F2; 
    padding-top: 0.8333rem; 
    padding-bottom: 0.8333rem; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05); 
    border: 1px solid #CCC; 
} 

.border-left { 
    border-left: 12px solid #ffffff; 
} 

.border-right { 
    border-right: 12px solid #ffffff; 
} 

Habe auch schon versucht, mit padding-left und padding-right, aber nichts passiert. haben auch versucht, mit dem Grenz links und rechts, wie Sie sehen, aber dann der box-shadow und Grenze von der Farbklasse sehen seltsam :(

Was kann ich hier tun? Irgendwelche Tricks?

Bild wo nur Farbklasse angewendet wird:

Bild, wo Grenz links und rechts und Farbklasse angewendet wird:

Answer 1

Fügen Sie den folgenden CSS die gewünschte Ausgabe zu erhalten ::

.border-right { 
border-right: 12px solid #ffffff; 
margin-right: 10px; 
} 

.color { 
background-color: #F2F2F2; 
padding-top: 0.8333rem; 
padding-bottom: 0.8333rem; 
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05); 
border: 1px solid #CCC; 
display: inline-block; 
width: 48%; 
} 

.row.gutter{ 
width: 100%; 
text-align: center; 
}