html - 随机空间 - 混乱的对齐

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