MeMoJlor

Есть метод play для медиафайлов. Можешь навесить на видео через сеттаймаут

Есть разные браузеры. У всех разные полосы, широкие, узкие. Даже в том же хроме у старых есть полоса, а у новых она не занимает ни одного пикселя. Чтобы решить проблему, сайт должен быть резиновым.

или так:

<div class='main'>
   <div class='one' id="четное"></div>
   <div class='two' id="нечетное"></div>
</div>

.main{
  position: relative;
}
.main div{
  position: absolute;
  transition: 0.3s;
  font-size: 30px;
  color: white;
  font-weight: bold;
}
.one{
  background: red;
}
.two{
  background: blue;
}

const четное = document.querySelector('#четное'),
      нечетное = document.querySelector('#нечетное');

let text = ['hi', 'privet', 'hallo', 'salam'],
    count = 0;
    
setInterval(() => {
  count++;
  if(text.length <= count) {
    count = 0;
  }
  if(count % 2 == 0 || count == 0) {
    четное.textContent = text[count];
    четное.style.opacity = '1';
    нечетное.style.opacity = '0';
  } else if (count % 2) {
    нечетное.textContent = text[count];
    нечетное.style.opacity = '1';
    четное.style.opacity = '0';
  }
}, 1000)

Это потому что изменяется размер слоя, на котором стоит курсор. При уменьшении, курсор не попадает на слой и событие прекращается увеличивая слой и так бесконечно. Вам нужно сделать слой статичным, на котором стоит событие.

let i = 1
while(i){
  let qna = prompt('Введите число','');
  if(qna % 2){
    alert('Число нечетное!')
  } else {
    alert('Число четное!')
  }
}

У текста анимация:

@keyframes text {
0%{opacity: 0}
20%{opacity: 1}
80%{opacity: 1}
100%{opacity: 0}
}

А над текстом передвигается полупрозрачный белый блок.

То что нужно

Мне кажется вы не нормализовали CSS стили. Но вряд ли это поможет. Как вариант использовать отрицательное значение margin-top, а лучше найти другой шрифт. А вообще, это частое явление и чтобы оно не бросалось в глаза, можно просто уменьшить шрифт/увеличить высоту навбара, чтобы было незаметно.

meritt.github.io/rubles

Спрячьте с помощью отрицательных значений margin-top

Просто верстайте и смотрите на разных устройствах. Devtools может показывать сильно по другому. Все приходит с опытом. Лично моя верстка под планшетную версию переходит тогда, когда ширина меньше 1050px.

Просто:
HTML {overflow-x: hidden;}

Почему бы не попробовать .ttf?

@font-face 
   {font-family: "Exo2";
   src: url("font/Exo2.ttf") format("truetype");
   font-style: normal;
   font-weight: normal;}

Сокращайте названия всегда.

Вот так:

.menu
   {background-color: rgb(247, 247, 247);
   position: fixed;
   opacity: 1;
   display: none;
   top: 0; right: 0;
   width: 100%;
   height: 120vh;
   z-index: 100;
   animation: menus 0.5s;
   animation-fill-mode: forwards;}
   @keyframes menus
   {70%{opacity: 0; right: 0;}
   99%{right: 0;}
   100%{opacity: 0; display: none; right: -105%;}}
.menu_active
   {opacity: 0;
   animation: menus2 0.5s;
   animation-fill-mode: forwards;}
   @keyframes menus2
   {0%{display: none; opacity: 0;}
   10%{display: block; opacity: 0;}
   100%{opacity: 1; display: block;}}