CSS auto margin is not working for absolutely-positioned element - html

Question

All the other divs worked well but when i got to this point it does not want to center it for some reason? I'm i missing something?
Take a look at the image link. The menu items is what i want to set the auto margins to. The margin for the ehigh works but not the sides.
http://i.imgur.com/PckN9jX.jpg
.Menuitems {
position:absolute;
margin: 120px auto;
width:398px;
height:26px;
z-index:11;
border-style: solid;
}
#mitem1 {
position:absolute;
background-image:url(http://i.imgur.com/cyKwZQj.png);
background-repeat:no-repeat;
background-position:center;
top:0;
left:0;
width:75px;
height:26px;
z-index:6
}
#mitem1:hover {
background-image:url(http://i.imgur.com/BMHScgr.png);
background-repeat:no-repeat;
background-position:center
}
#mitem1:active {
background-image:url(http://i.imgur.com/4Y4sMtq.png);
background-repeat:no-repeat;
background-position:center
}
#mitem2 {
position:absolute;
background-image:url(http://i.imgur.com/GiAoMqC.png);
background-repeat:no-repeat;
background-position:center;
top:0;
left:77px;
width:75px;
height:26px;
z-index:7
}
#mitem2:hover {
background-image:url(http://i.imgur.com/XQKv9yC.png);
background-repeat:no-repeat;
background-position:center
}
#mitem2:active {
background-image:url(http://i.imgur.com/KQ07YMK.png);
background-repeat:no-repeat;
background-position:center
}
#mitem3 {
position:absolute;
background-image:url(http://i.imgur.com/UPERy0F.png);
background-repeat:no-repeat;
background-position:center;
top:0;
left:154px;
width:90px;
height:26px;
z-index:8
}
#mitem3:hover {
background-image:url(http://i.imgur.com/EqkUtsr.png);
background-repeat:no-repeat;
background-position:center
}
#mitem3:active {
background-image:url(http://i.imgur.com/k54mb7V.png);
background-repeat:no-repeat;
background-position:center
}
#mitem4 {
position:absolute;
background-image:url(http://i.imgur.com/QHExEjQ.png);
background-repeat:no-repeat;
background-position:center;
top:0;
left:246px;
width:75px;
height:26px;
z-index:8
}
#mitem4:hover {
background-image:url(http://i.imgur.com/BjKCQbw.png);
background-repeat:no-repeat;
background-position:center
}
#mitem4:active {
background-image:url(http://i.imgur.com/EVwDUoB.png);
background-repeat:no-repeat;
background-position:center
}
#mitem5 {
position:absolute;
background-image:url(http://i.imgur.com/oKrhDAE.png);
background-repeat:no-repeat;
background-position:center;
top:0;
left:323px;
width:75px;
height:26px;
z-index:8
}
#mitem5:hover {
background-image:url(http://i.imgur.com/gnLuhed.png);
background-repeat:no-repeat;
background-position:center
}
#mitem5:active {
background-image:url(http://i.imgur.com/iqFh66v.png);
background-repeat:no-repeat;
background-position:center
}
#menuline {
position:absolute;
background-image:url(http://i.imgur.com/4xOPK1I.png);
background-repeat:no-repeat;
background-position:center;
left:75px;
top:0;
width:2px;
height:26px
}
#menuline2 {
position:absolute;
background-image:url(http://i.imgur.com/4xOPK1I.png);
background-repeat:no-repeat;
background-position:center;
left:152px;
top:0;
width:2px;
height:26px
}
#menuline3 {
position:absolute;
background-image:url(http://i.imgur.com/4xOPK1I.png);
background-repeat:no-repeat;
background-position:center;
left:244px;
top:0;
width:2px;
height:26px
}
#menuline4 {
position:absolute;
background-image:url(http://i.imgur.com/4xOPK1I.png);
background-repeat:no-repeat;
background-position:center;
left:321px;
top:0;
width:2px;
height:26px
}
<div class="topbox">
<!-- Menu Items -->
<div class="Menuitems">
<a href="#">
<div id="mitem1"></div></a> <a href="shows.html">
<div id="mitem2"></div></a> <a href="codes.html">
<div id="mitem3"></div></a> <a href="about.html">
<div id="mitem4"></div></a> <a href="contact.html">
<div id="mitem5"></div></a>
<div id="menuline"></div>
<div id="menuline2"></div>
<div id="menuline3"></div>
<div id="menuline4"></div>
</div>
<a href="#">
<div class="divlogo"></div>
</a>
</div>

Answer 1

The absolute positioning takes it out of the flow of the page and causes the centering from the auto margins not to work.
.topbox {
position:absolute;
width:100%;
z-index:11;
}
.Menuitems {
margin: 120px auto;
width:398px;
height:26px;
border-style: solid;
}
Will get the menu div positioned correctly. Get rid of all the absolute position on your menu items.
I made this Plunker it might be what you're looking for. http://plnkr.co/edit/wcRaJqvg0fsPT9HcBynf?p=preview

Answer 2

Block level elements are greedy. They use margins to take up the entire horizontal space they're in so that nothing is inline with them. If you set auto on both left and right then both sides want all the space, so they share - resulting in a centred object.
If you use position:absolute or fixed on a block level element it removes this greedy behaviour from the element.

Answer 3

Change the position of .Menuitems to relative and that should fix the issue.