Why is the html element does not remain in the same position when you zoom the browser window?

hi, I pointed out to the class .div { margin-left: 50% }, I have moved to the end of the right edge of the monitor, but when you reduce the browser window (I wanted to check how it will look on other monitors), this element I began to shift to the left, ie he can not stay in one place, why? I have margins in percent, not pixels, who knows what's going on?
code:
<div class="header">
 <span>Text1</span> <span class="div">Text2</span> 
 </div>


.header {
 width: 98%;
 background: #5DD36E;
 padding: 1%;
}


 .div {
 margin-left: 50%;
 }
June 27th 19 at 14:56
2 answers
June 27th 19 at 14:58
Solution
Because it is %% of the width of the parent.
I mean? I'm coding a fierce noob, can you tell me how to fix it? - ike.Barro commented on June 27th 19 at 15:01
: margin-left:10% 10% are considered to be the width of the parent. The wider the parent,the greater the indent.
If you need fixed - we need to write px.

could you tell me how to fix it?

What result should be achieved. - Elmer.Upt commented on June 27th 19 at 15:04
: thank you no, I the cent was replaced by the pixels - still the same - ike.Barro commented on June 27th 19 at 15:07
:
https://jsfiddle.net/mjt79gzf/ so?

Where to put the second span? - Elmer.Upt commented on June 27th 19 at 15:10
: Oh, thank you) - ike.Barro commented on June 27th 19 at 15:13
June 27th 19 at 15:00
if fixed need here is codepen.io/neeil/pen/VpJgKY
thanks but your method didn't work - ike.Barro commented on June 27th 19 at 15:03

Find more questions by tags PHP