財団と同じ行の中-7と中-5の間の空白

Question

私が作ろうとしている2つの箱の単純なスタイリングで助けが必要です。私はそれらの間に空白を入れる必要があります。私はファンデーションを使用していて、媒体7を満たすはずのボックスと媒体5を満たすもう一つのボックスを作った。

私はちょうどそれらの間に空白が必要ですが、そうすることはできません。

コード：

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

は、すでにパディング左とパディング右で試してみましたが、何も起こりません。 はまた、あなたが見るように国境左右で試してみましたが、その後カラークラスからボックスシャドウとの国境は、私がここで何を行うことができます奇妙な:(

に見える？どんなトリック？

イメージ色のみのクラスが適用される場合：

ボーダー-左右と色クラスが適用され

画像：

Answer 1

必要な出力を得るために、以下のCSSを追加します::

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