CSS - Positionnement de blocs quand je dézoom

Bonjour,

Je suis en en train de créer un site internet pour un ami. Je suis étudiante en DUT Services et Réseaux de Communication, j'ai donc eu des cours sur l'HTML / CSS / JS et PHP...

Voilà mon problème,
tous mes blocs, que ce soit du texte ou des images sont positionnés en % avec la règle margin. Pour l'image centrale, elle est correctement positionnée sur un écran de 17" full HD (c-a-d 1920x1080) tandis que sur un 15.6" elle est décalée.

Ensuite mon plus gros problème est que lorsque je dézoome ou zoome la page les blocs rétrécissent sur la gauche alors que je souhaiterai qu'ils restent centrés par rapport au background au lieu de se décaler du background.

Je pense qu'il existe des règles CSS pour ce genre de problème comme position mais je n'arrive pas à cerné leur fonctionnement etc.

Voilà mon code CSS concernant le background, l'image et le texte de présentation :

body { 
	background-image: url(images/background2.png);
	background-repeat: no-repeat;
	background-origin: padding-box, content-box;
	background-position: center top;
	background-color:#000000;
	width:100%;
}

/************** TEXTE ACCUEIL *******************/
div.presentation {
	text-align: center;
	margin: 0 auto;
}
p.txt {
	margin-left: 20%;
	margin-top: 0%;
	margin-right:25%;
	font-family: "Calibri", "Trebuchet MS", Arial;
	font-size: 1em;
	text-align: justify;
	color:#000;
}

/************** IMAGE ACCUEIL *******************/
div.imgAccueil {
	margin-left: 17%;
	margin-top: 6%;
}

Merci pour vos réponses !