Q:

 doesn't reach at the top of the page

Baffled, this is the html:
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Welcome</title>

    <link rel="stylesheet/less" type="text/css" href="/Styles/CompiledLESS.less" />
    <script src="/Scripts/JS/less-1.5.0.min.js"></script>
</head>
    <body>
        <div id="mainContentDiv">
            <div>
                <h2>Please Log In</h2>
                <p>You must <a href="/Account">Log in</a> to use.</p>
            </div>
        </div>
    </body>
</html>

CSS is this:
body {
    background-color: #D5E6ED;
    background-image: url("~/Images/Background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    color: #444444;
    font-family: Verdana,Tahoma,Arial,"Helvetica Neue",Helvetica,Sans-Serif;
    font-size: 71%;
    margin: 0;
    padding: 0;
}

#mainContentDiv
{
    margin: 0 auto;
    margin-top:0;
    padding: 0;
    width: 997px;
    background-color:#fff;
}

I can't see anything wrong but the result is the <body> tag is not flush with the top of the browser window when I inspect it with firebug.
There is no other CSS, that's the entirety of it.

A:

Working Fiddle
h2{
margin:0;
}

