随机空间 - 混淆对齐

Question

我正在开设我的第一个网站，到目前为止我对我的进展感到非常满意，但我遇到了一个问题。

我正在尝试将黑色“块”与其上方的蓝色块对齐。出于某种原因，黑色酒吧前面就像一个随机空间。

我正在使用960网格系统（16列变体）。以下是我遇到的问题的图片：http://gyazo.com/4a9a0ba8b31105f1e95029f9cf878009.png

这是我的代码。任何人都可以理解为什么我有这个随机空间吗？

<div id="banner" class="grid_16">
    <div id="socialmedia" class="grid_3 prefix_7">
        <img src="images/facebook.gif" alt="facebook icon">
        <img src="images/twitter.gif" alt="twitter icon">
        <img src="images/youtube.gif" alt="youtube icon">               
    </div>
    <div id="bar" class="grid_16">
    </div>          
</div>

然后是CSS：

#bar {
    height: 20px;
    background-color: black;
}