Margin 0 auto will not center two of my divs - html

Question

So, i'm trying to center three of my divs on the page, #header, #nav, and #headerImg. I can't seem to center my #header and #nav divs using margin: 0 auto; though. They seem to be stuck to the left side of my page when I refresh the page.
Here is my style.css for my page:
div#header{ //I only have one image here.
position:absolute;
padding: 10px 20px;
width: 960px;
height: 49px;
top: 0px;
background-color: #2E5E8D
}
div#nav{ //I have 4 links here
position:absolute;
margin: 0 auto;
padding: 10px 20px;
width: 960px;
height: 20px;
top: 69px;
background-color: #2E5E8D
}
div#headerImg{ //I have one image here,
position: relative;
display: block;
margin: 0 auto;
width: 1000px;
top: 95px;
}
div#content{
position:relative;
top:109px;
width:1000px;
display: block;
margin: 0 auto;
}
div#content a{
color: blue;
text-decoration: none;
}
#content a:hover{
color: red;
text-decoration: underline;
}
#content dt{
margin-top: 10px;
}
div#footer{
position: relative;
margin: 0 auto;
top: 109px;
background-color: #333333;
color: white;
text-align: center;
font-size: 14px;
width: 1000px;
padding: 10px;
}
The width on my #header and #nav have to be set to 960px as per instructors request, and I'm sure he wanted the image inside my #headerImg to be inside my #header div, but i couldn't get the image from overlapping. Therefore, that's the only div of the 3 that I can center.
I tried using margin: 0 auto; and display: block on both but they don't seem to work. I tried using margin: 0 10% which seemed to work on my computer, but it is misaligned on another computer. My comments in the code are just to show what I have in the div.

Answer 1

Try add div#header and div#nav the following rules:
margin-left: -500px;
left: 50%;