css - medium-7 和 medium-5 之间的空白与 Foundation 在同一行

Question

我需要一些帮助来为我尝试制作的两个盒子设计一些简单的样式。我需要在它们之间留出一些空白。我正在使用粉底，并制作了一个应填充中等 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;
}

已经尝试过 padding-left 和 padding-right，但没有任何反应。如您所见，也尝试过使用 border-left 和 right，但是颜色类中的框阴影和边框看起来很奇怪:(

我可以在这里做什么？有什么技巧吗？

仅应用颜色类的图像:

应用左右边框和颜色类的图像:

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