CSS：子元素不包含内部父元素

Question

所以我的网站底部有一个包含两列的容器，如下所示：

<div id="homeBottomContent">
<div id="homeColumn1" class="contentColumn column1">
<h2>Column 1</h2>
<p>Column 1 Stuff</p>
</div>
<div id="homeColumn2" class="contentColumn column2">
<h2>Column 2</h2>
<p>Column 2 Stuff
</p></div>
</div>

当我尝试为列提供80％宽度和10％边距时，如下所示：

.column1, .column2 {
width: 80%;
margin: 1em 10%;
}

.column1 {
float:left;
}

.column2 {
clear: left;
}

我的列不在框内。他们偏向右边一点点。所以，当我把边缘拿走并尝试：

.column1, .column2 {
width: 100%;
}

它们在#homeBottomContent div之外延伸并离开页面。可能导致这种情况的原因，我该怎么做才能解决这个问题？我在#homeBottomContent div上没有边填充或边距。