html - ヘッダー DIV の外側のヘッダー テキスト

Question

ヘッダーの青い DIV 内にあるはずの "Text on the left" と "Text on the right" というテキストがその下にある理由をご存知ですか? テキストの上部に予期しないパディングまたは何かがあるようです。JSフィドルはこちら。

CSS:

#header {
    width: 100%;
    height: 18px;
    background: #0064C5;
}
#header p.left {
    float:left;
    color:#000;
}

#header p.right {
    float:right;
    color:#000;
}