Как исправить конкретное масштабирование CSS позиции в процентах

Question

Как исправить конкретное масштабирование позиции CSS в процентах? Переход происходит во время ручного масштабирования в браузере. код:

jsfiddle: http://jsfiddle.net/y5b576cm/2/

Answer 1

Старайтесь избегать как можно большего размера в процентах по ширине и высоте, они очень грязные.

Прежде всего, ваши верхние контейнеры должны иметь одинаковую фиксированную ширину:

section.h-banner {
width: 66.444%;
position: relative;
margin: 0 auto;
left: -3.666%;

}

затем выровняйте дочерний контейнер

.container-header {
text-align: center;
margin: 0px -12%;
left: 12.7%;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;

}

но опять же, очень грязно ..