Orta çizgi 7 ile orta-5 arasındaki boşluk

Question

ile aynı çizgiye getirilmeye çalışıyorum Yapmaya çalıştığım iki kutudan oluşan basit bir tasarımla ilgili yardıma ihtiyacım var. Aralarında biraz beyaz boşluk olmalı. Temel kullanıyorum ve orta-7'yi dolduracak bir kutu ve orta-5'i dolduracak bir kutu yaptık.

Sadece aralarında biraz boşluk olması gerekiyor, ancak bunu yapamıyorum.

Kodu:

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

zaten dolgu sol ve padding-sağ ile çalıştı, ancak hiçbir şey olmuyor mu. Ayrıca border-left ve gördüğünüz, ama sonra renk sınıfından kutu gölge ve sınır garip görünüyor sağ olarak :(

Burada ne yapabilirim? Böyle bir hile ile denediniz mi?

Resmi tek renk sınıfı uygulandığı burada:

sınır sol ve sağ ve renk sınıfı uygulanır

Resim:

Answer 1

gerekli çıktı ::

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