The title says it all really, I have a problem within my website being that when I zoom in or out, all of the images which are currently placed in the correct place, all distort out of place.
Here is a few screenshots below to show what happens and all the code within my website.

If anyone could help me out, I would really appreciate it.

Thank you in advance.

Zoom distortion Help!-helpme.jpgZoom distortion Help!-helpmeplz.jpgZoom distortion Help!-helpmeplz1.jpg

Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Generic Gaming</title>
<style>
#Navigation {
	background-image:url(navbar2.png);
	background-position:center;
	background-repeat:no-repeat;
	margin-top:5%;
	border:0px;
	padding:0px;
	margin-right: auto;
   margin-left: auto;
   min-width:1000px;
	
}
ul {
    list-style-type: none;
    padding: 0;
	margin-left: 21%;
	color:#fff;
	border:0px;
	padding:0px;
}	
li {
	float: left;
	color: #FFF;
	border:0px;
	padding:0px;	
}

a {
    display: block;
	text-decoration:none;
	color: #FFF;
	border:0px;
	padding:3px;
	min-width:10px;
}
body{
	background-image:url(background.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-color:#232323;
	background-size:cover;
	margin:0px;
	padding:0px;
	border:0px;
	min-width:1000px;
		
}
ul#nav { 
    display: inline-block;
    padding: 0px; 
    list-style-type: none; 
    height: 3%;
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:12px;
	border:0px;
    }
a:hover{
color:#30BBE9;	
}


</style>
</head>


<body>

<div id="Navigation" style="height:auto; width:auto;">
<ul id="Nav" style="margin-bottom:9%; margin-left:16%;">
  <li><a href="index.html">HOME</a></li>
  <li><a href="news.asp">FORUMS</a></li>
  <li><a href="contact.asp">VIDEOS</a></li>
  <li><a href="about.asp">DOWNLOADS</a></li>
</ul>
<img src="logo.png" width="313" height="25" alt="Generic Gaming" style="margin-bottom:52px; margin-left:-225px;">
</div>





</body>
</html>