Антон

https://jsfiddle.net/gap0rsz9/

https://jsfiddle.net/5hd0sm0v/

Вычислениями ширины экрана, ширины синего и красных блоков, ну и соответственно, построить формулу, по которой это все будет работать.
А так, мало входных данных, непонятно, в какой ситуации красный блок не налезает на синий, имеет ли он фиксированный размер и что почем вообще.

Все верно. Хорошая фотография и поднятая сочность цветов тех, что уже были.
Банальный пример, за исключением того, что снято на тапок.

Привет, перед тем как задать вопрос здесь прочитал на одном из форумов, что в Search Console Гугла рекомендуют добавлять 4 версии сайта, то есть: с WWW и без WWW, с HTTP и HTTPS если оно есть, а в robot.txt указывать предпочтительный домен, зачем?

Чтобы задать главное зеркало сайта. Формально говоря, это по мнению поисковика 4 дубля.

Домен регал вида site.ru, без WWW, добавил без WWW и HTTP, в вебмастер Гугла сам отображает как http:// site. ru, так зачем ещё другие версии?

Неважно каким Вы его зарегили. Префиксы - "служебные протоколы", не в даваясь в подробности.
Затем, чтобы дать гуглу понять, что Вы владете всеми этими дублями и из них (добавленных) выбираете предпочтительный. Склейка.

Далее, решил сайт перевести на HTTPS, рекомендации Яндекса выполнил, а рекомендации Гугла немного отличаются, например Гугл сразу советует настраивать редирект с HTTP на HTTPS, а Яндекс только после склейки зеркал, опишите кто как делал?

Если у Вас все склейки настроены, редиректы работают, тупо ждите переиндексации

Второе нужно ли новый сайт с HTTPS добавлять в Яндекс метрику и создавать новый счётчик?

Нет

И последний вопрос, Яндекс пишет, что старый сайт с HTTP из Яндекс вебмастера удалять не обязательно, значит это подразумевает, что в принципе можно, а что на этот вопрос говорит Гугл я не нашёл, так нужно ли удалять старую версию из Search Console или нет, так как функция переезда сайта в Search Console не предусматривает перезд с HTTP на HTTPS, то это означает, что теперь у вас два сайта с одинаковым контентом но с разными протоколами, которые оба поисковика воспринимают как разные сайты.

Сейчас Яша вебмастер работает так же, можно добавить несколько версий сайта, предпочитаемое зеркало тоже можно выбрать

Подумайте, относительно чего у Вас идет позиционирование шариков, относительно елки или страницы?
Правильно, относительно документа/
Во-первых, блок animated должен находится внутрика блока tree, а чтобы шарики позиционировались относительно елки, #tree надо задать position: relative;
https://jsfiddle.net/u33vou5o/

h1, h2, h3, h4, .someclass, .wtf, #id, input[type="text"] { font-size: 100px; }