向侧面添加填充可以打破布局

Question

我以为我让Susy失望了，但现在已经挣扎了好几个小时了。我也感到非常愚蠢，因为我之前从未遇到过这个问题，所以我知道这是我的最终目的。可能是对盒子模型的误解，但这是我遇到的麻烦。

我设置了容器div，其中包含9列内容的#main div和3列侧边栏。 #main div有一个白色的背景，所以我需要一些填充，但每当我添加填充时，布局就会中断，侧边栏会被推到底部。

没有填充：

带填充的

：

我的html结构是：
.container
+主要 ++ content（@include span（9））
++ sidebar（@include span（last 3））

我还在html和susy设置中全局设置了边框大小设置。如果我将宽度：100％和box-sizing：content-box添加到#main div，这可以工作，但是使容器在右侧更宽，将其推过它上面和下面的元素，我知道，因为内容框添加它。这在某种意义上有效，但不是我想要的结果。我需要#main div保持相同的宽度，但允许我向左右添加填充。

就像我说的，这对我来说是一个新问题。我已经和Susy建立了几个网站，之前没有遇到过这个问题，所以我觉得非常愚蠢。

更新1：添加填充到内容和侧边栏div工作，除了在我的一个页面上我在Content div中有一个图像库做同样的事情，行中的第三个项目落到底部。

更新2：在花了一整天思考并研究之后，我得出结论，这与它是一个固定列宽的固定站点有关。即使使用固定宽度的容器，当div的宽度设置为％时，布局也不会中断。有趣。也许有一种方法可以让Susy使用'静态'数学输出来工作，我不确定。

Answer 1

我能够通过增加1列来修复它。

http://codepen.io/anon/pen/RNZOQL

columns: 13

问题是因为填充需要额外的列。

Answer 2

将其添加到您的列中，如下所示：

#content {
  @include span(9 of 12);
  padding: 20px 0 20px 20px;
}

#sidebar {
  @include span(last 3 of 12);
  padding: 20px 20px 20px 0;
}

在这里，你有它的工作：

http://codepen.io/yivi/pen/BywygG

这里有流畅的数学： http://codepen.io/yivi/pen/jEGEjj

此致