javascript - 奇妙な翡翠ブロックの重なり

Question

Express アプリのテンプレート エンジンとして Jade を使用しています。メイン ページのヘッダーを設定し、ブロック タグをレイアウト ファイルの末尾に追加しました。

レイアウト.ジェイド

doctype 5
html
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')

    body
        div#header
            ul#mainNav
                li: a(href='/') Home 
            ul#personNav
                li: a(href='/login') Login/ Register 
    block content

そしてindex.jadeの場合、私はこれを持っています:

extends layout

block content
    div#mainBody
        p Hello

こんにちは段落タグをヘッダーとインラインで使用している理由を理解しようとしています。これは、出力がどのように見えるかです。

https://lh5.googleusercontent.com/-wEBye5dTV0E/UhQ4pXDemZI/AAAAAAAAH4c/5FlY3PPw7_A/w968-h544-no/Screenshot+from+2013-08-20+23%3A44%3A23.png

編集:これは、言語がブロックをヘッダーの一部と見なすことに大きく関係していると思います。これをオフにする方法がわかりません。

編集 2: 申し訳ありませんが、スタイルを忘れたようです。ご覧の通りとても軽いです。

スタイル.css

body
{
  padding: 0px;
  margin: 0px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a
{
  color: #00b7ff;
}

#mainNav li
{
    list-style-type:none;
    display:inline;
    float: left;
}


#personNav li
{
    display: inline;
    list-style-type:none;
    float: right;
}

#mainBody
{
    margin: 70px;
}