Шрифты по разному ведут себя в консоли и на реальном устройстве, почему?

Пусть будет панель. Шрифт находиться в проекте. Браузер CHROME там и там. На счет закешировались навряд ли. А вот на счет глифа не слышал. Вот ссылка если интересно
https://semflinn.github.io/Juliet/

Как лучше реализовать элемент с потомками по сторонам?

Родителю position: relative, а дочкам position: absolute; и правому transform: rotate(deg90);

Ломается верстка на мобилке, не найду причину, в консоли все ровно, может кто сталкивался?

Спасибо за дельный совет.

Ломается верстка на мобилке, не найду причину, в консоли все ровно, может кто сталкивался?

Скрины с андройда на айосе то-же самое, а в консоли всё ровно.

Ломается верстка на мобилке, не найду причину, в консоли все ровно, может кто сталкивался?

Спасибо за ответ. Но проблема не в хедере а в блоках с текстами. На консоли все норм, а на мобилке текст уходит вверх.

Ломается верстка на мобилке, не найду причину, в консоли все ровно, может кто сталкивался?

Что-то не получается скрин вставить почему то тег вводит. Там у всех одна и таже беда уходят вверх чуть выше блока.

"Hello world" Как результат счетчиков сделать на всех страницах одинаковым?

Если есть соображения как применить localStorage к моему коду был бы при много благодарен. Но и так большое спасибо за подсказку.

"Hello world" Как результат счетчиков сделать на всех страницах одинаковым?

На страницах на которые была передача возникает ошибка не читается null . counter++; срабатывает один раз, а если добавить querySelectorAll выдает ошибку на функцию в которой лежит counter++;

"Hello world" Как результат счетчиков сделать на всех страницах одинаковым?

Спасибо за ответ. total.innerText = counter; ломает dataCheck.innerText = parseInt(dataCheck.innerText) + 1;

Как добавить класс внешнему блоку только тогда когда элемент списка имеет класc active?

Большое спасибо за ваш код. Если вам будет интересно разобрать вот код который я понаписал.
Тут вешаю active при клике одному элементу списка и убираю предыдущему.
const container = document.querySelector('.blockLeft-menu__list')

container.addEventListener('click', function(e) {
const items = document.querySelectorAll('.blockLeft-menu__link')
const target = e.target
Array.from(items).forEach(item => {
item.classList.remove('active')
})
target.classList.add('active')
})
Тут через второй класс элемента списка('.blockLeft-menu__link1')
добавляю класс внешнему блоку.
Но при клике по другому элементу списка ('.blockLeft-menu__link') active переходит,
а на внешнем блоке active остаётся. Задача убрать active с внешнего блока если
элемент списка его повесивший сам не активен.

const link1 = document.querySelector('.blockLeft-menu__link1')

if (link1){
const johnathan = document.querySelector('.blockRight__johnathan');
link1.addEventListener("click", function (e) {

johnathan.classList.toggle('active');

});
}

const link2 = document.querySelector('.blockLeft-menu__link2');

if (link2){
const journal = document.querySelector('.blockRight__journal');
link2.addEventListener("click", function (e) {

journal.classList.toggle('active');

});
}

Как отменить active у блока которому active был добавлен из списка?

Большое спасибо за конструктивное замечание.