У меня возникла проблема с правильным выравниванием div в правой части браузера после того, как окно просмотра достигло максимальной ширины.
Этот Codepen показывает проблему.
Проблемный div — это .rghtlogo, который, несмотря на то, что область просмотра браузера меньше 1200 пикселей (максимальная ширина тела), правильно позиционируется с правым углом: 4%
Однако, когда окно просмотра браузера становится больше 1200 пикселей, оно сдвигает поле на 4% от внутреннего правого края контейнера body, а не в браузере.
Я безуспешно пытался обернуть его в div с абсолютным позиционированием, безуспешно пытался плавать .rghtlogo и в основном прибегал к действительно небрежному нежелательному обходному пути, используя несколько медиа-запросов, чтобы в основном изменить поле по мере того, как браузер становится больше. Однако это действие не плавное.
@media (min-width:1201px){.rghtlogo{margin-right:3% !important}}
@media (min-width:1216px){.rghtlogo{margin-right:1.5% !important}}
@media (min-width:1230px){.rghtlogo{margin-right:.75% !important}}
@media (min-width:1251px){.rghtlogo{margin-right:0% !important}}
@media (min-width:1256px){.rghtlogo{margin-right:-1% !important}}
Я безрезультатно искал, как это исправить. Любая помощь приветствуется.