Почему элемент html не остается на одной позиции при увеличении окна браузера?

Question

[ibr_98]

привет, я указал классу .div { margin-left: 50% }, он у меня переместился в конец правого края монитора, но когда уменьшаю окно браузера (хотел проверить как будет смотреться на других мониторах), то этот элемент у меня стал смещаться в левую сторону, тоесть ему не сидится на одном месте, почему? я же указал отступы в процентах, а не в пикселах, кто знает в чем дело?
код:

<div class="header">
		<span>Текст1</span>  <span class="div">Текст2</span> 
   </div>

.header {
     		        width: 98%;
			background: #5DD36E;
			padding: 1%;
		}
             
  
               .div {
			margin-left: 50%;
		}

Answer 1

[Ankhena]

Потому что это %% от ширины родителя.

Comments

[ibr_98]

в смысле? я в верстке лютый нуб, не подскажешь как исправить?

[Ankhena]

ibr_98: margin-left:10% 10% считаются от ширины родителя. Чем шире родитель,тем больше отступ.
Если нужен фиксированный - надо писать в px.

не подскажешь как исправить?

Какого результата надо достичь.

[ibr_98]

Ankhena W: спасибо никакого, я проценты заменил на пикселы - все равно так же

[Ankhena]

ibr_98:
https://jsfiddle.net/mjt79gzf/ так?

Куда надо поместить второй спан?

[ibr_98]

Ankhena W: о, спасибо)

Answer 2

[neeil]

если фиксированные нужны то вот codepen.io/neeil/pen/VpJgKY

Comments

[ibr_98]

спасибо, но твой метод не сработал