Div margin: auto not centering page in Chrome, IE

i'm running some basic beginner tutorials in order to learn how to properly run html. I've come to the portion where i'm using a div tag in css to center the content. However, once i open the test page, everything stays locked to the right of the browser. I've been scouring the forums for any solution and nothing seems to fix the issue. Tested in Chrome and IE.

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>My First Website</title>
   <link rel="stylesheet" href="css/style.css">
</head> 
<body>

<div>
    <h1> My Website </h1>
    <p><a href="about/about.html">Learn more about me.</a></p>

    <img src="img/lady.jpg" alt="skyrim">


    <h2>My New Section </h2>

</div>




</body>
</html>

Here's the CSS:

    a {
    color: red; 
    text-decoration: none;  
}

h1 {
  font-family: sans-serif;
 }

div {
    width: 500px;
    margin: 0 auto;
    background: red;
    text-align: center;
     }

Solution

It looks fine in my end:

http://jsfiddle.net/Riskbreaker/JH7NK/

If you mean that extra space you have vertically on top its your h1.

I edited to show you:

div h1 {margin: 0}