Проблемы в том, что когда блок перемешается, он выходит из влияния hover. Задайте padding, либо напишите функцию, чтобы блок перемешался до конца и не застревал на промежутке
Есть разные браузеры. У всех разные полосы, широкие, узкие. Даже в том же хроме у старых есть полоса, а у новых она не занимает ни одного пикселя. Чтобы решить проблему, сайт должен быть резиновым.
По поводу изменения уже ответили. Давайте отвечу как увеличить.
Функция, фиксирует клик и выполняет на первый и второй клик разные задачи:
img.addEventListiner('click', () => {
let i = 0;
i++;
if(i==1){
поменять url картинки
} else if (i==2){
навесить класс на картинку, чтобы она увеличилась на весь экран с position: fixed
i=0;
}
})
Мне кажется вы не нормализовали CSS стили. Но вряд ли это поможет. Как вариант использовать отрицательное значение margin-top, а лучше найти другой шрифт. А вообще, это частое явление и чтобы оно не бросалось в глаза, можно просто уменьшить шрифт/увеличить высоту навбара, чтобы было незаметно.
Просто верстайте и смотрите на разных устройствах. Devtools может показывать сильно по другому. Все приходит с опытом. Лично моя верстка под планшетную версию переходит тогда, когда ширина меньше 1050px.