html - ランダム スペース - めちゃくちゃな配置

Question

私は最初の Web サイトに取り組んでおり、これまでの進捗状況には非常に満足していますが、問題が発生しました。

黒い「ブロック」をその上の青いブロックに合わせようとしています。なぜか、黒いバーのすぐ前にランダムなスペースのようなものがあります。

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