Изменение размера lo go на CSS при использовании Bootstrap 4 дает неожиданные результаты

Question

Я новичок в этом и создал сайт, который сейчас пытаюсь оптимизировать для мобильных устройств. Я установил для lo go определенный размер в пикселях, а затем попытался уменьшить его для мобильного просмотра. Если я использовал процентное уменьшение, он перемещал положение переключателя навигационной панели, а если я использовал пиксельное уменьшение, то не делал. Я очень рад перейти к использованию уменьшения пикселей, но я не понимаю, почему это происходит:

@media (max-width: 480px) {



                .header_logo {
                width: 80px;
                height: auto;
        }
        }

в порядке: переключатель остается в правой части экрана

@ media (max-width: 480px) {

                .header_logo {
                width: 20%;
                height: auto;
        }
        }

перемещает переключатель на уровень ниже go

Если бы кто-нибудь мог мне это объяснить, я бы будь самым благодарным.