Hello I am having some serious trouble, i have created an image which is a navigation, this navigation has 8 images, which are all aligned perfectly as to how i want them, but i would like to center the whole thing on all devices.
}
#box2 {
position: fixed;
width:100%
margin: auto;
}
<head>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
</head>
<body>
<div id="box2">
<a href=""><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/111.png" width="500" style="position: absolute; top: 100px; left: 500px; "/>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid white; top: 240px; left: 530px; "/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid blue; top: 170px; left: 785px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid green; top: 140px; left: 650px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid red; top: 280px; left: 890px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid purple; top: 435px; left: 565px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width=65" style="position: absolute; border: 0px solid grey; top: 435px; left: 820px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid yellow; top: 325px; left: 690px;"/></a>
</div>
</body>
Any help would be great, i just need the whole thing to be centered on all devices including, pc / laptop / mobile / tablet.
I have tried over 30 different questions and answers from stackoverflow none has helped me, so i decided to post my personal problem.