Сергей Горячев

Потому что нужно делать верстку с учетом ретина экранов.
Проще говоря, на 4 пикселя простого экрана приходится 16 пикселей на экране ретина.


Из-за этого картинки становятся нечеткие.
https://habrahabr.ru/post/150071/

Решений множество.
- retina.js
- media only screen and (-webkit-min-device-pixel-ratio: 2)
- просто делать картинки х2 размера
- использовать SVG
Выбирайте любое и делайте уже современные сайты :)

https://jsfiddle.net/vf5t8mn6/
Перенес форму в коде выше навигации.
Тут или ограничить ширину nav с меню, или форму поднять.
Навигация получает width: 100%; и вытесняет форму.

https://jsfiddle.net/vf5t8mn6/1/
А расстояние между инпутом и кнопкой потому что они по умолчанию display: inline-block;
Между инлайновыми блоками всегда присутствует какой-то непобедимый отступ (не считая костылей).
Проще победить задава им обоим float: left; .

https://jsfiddle.net/webirus/dv5c8jdt/1/
Я поставил свой reset.css и всё сошлось.

Используйте корректный сброс стилей и такой проблемы не будет.

Всё решается строкой.
https://jsfiddle.net/webirus/dv5c8jdt/2/

textarea {
    margin: 0;
    border: 0;
}

Охо-то) Почти с такого же вопроса начинался мой путь на тостере)))
https://jsfiddle.net/webirus/rjzcdpg2/

1. https://jsfiddle.net/webirus/0yf2fdsf/
2. https://jsfiddle.net/webirus/5v89Lxu7/

https://jsfiddle.net/webirus/k0nay43f/3/
JS там не нужен. position + z-index верные выставить просто надо.
Желтым выделил, чтобы показать, какое должно быть меню.

https://jsfiddle.net/webirus/k0nay43f/4/
Тут вариант с плавным появлением, если оно нужно.

https://jsfiddle.net/webirus/k0nay43f/5/
Ну и последний вариант, ковёр на всю страницу.

Была у меня такая проблема, решилось прелоадером.
В head добавить

<style>
body, html { opacity: 0; }
</style>

и подвесить прелоадер, который бы перекрывал обратно.

<!-- preloader -->
    <style type="text/css">
        .preloader_bg { position: fixed; background: rgba(15,15,15,1); width: 100%; height: 100%; top: 0; left: 0; z-index: 200; }
        .preloader_content { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 201; font-size: 14px; }
        .preloader_content span { display: block; margin: auto; text-align: center; text-transform: uppercase; color: rgba(225,225,225,1);}
    </style>
    <script type="text/javascript">
    $(function(){
        $('.preloader_bg, .preloader_content').fadeIn(0);
        $(window).load(function(){
            $('body,html').css({ opacity: 1 }); // снимаем прозрачность
            $('.preloader_bg').delay(250).fadeOut(1500);
            $('.preloader_content').delay(250).fadeOut(750);
        });
    });
    </script>
    <div class="preloader_bg"></div>
    <div class="preloader_content">
        <span>Идет загрузка...<br>Подождите...</span>
    </div>
    <noscript>
        <style>
            html, body { opacity: 1 !important; }
            .preloader_bg, .preloader_content { display: none !important; }
        </style>
    </noscript>
    <!-- /preloader -->

$('.navigate a').bind("click", function(e) {
        var anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top - 109
        }, 1000);
        e.preventDefault();
    });

scrollTop: $(anchor.attr('href')).offset().top - 109 // высота шапки
Если высота не фиксированная, считайте через jQuery и подставляйте.
https://jsfiddle.net/webirus/q43x4m93/

Во-первых, не используй id для блоков, это нужно только для скриптов.

А во-вторых, сделай через padding-top для .page
https://jsfiddle.net/webirus/7ak1zwet/

В третьих, да, совсем не понятно, нахрена тут вообще float?
Работает без всяких флоатов.
https://jsfiddle.net/webirus/4gee5wqs/

Если хотите использовать margin, то нужно добавить для .header top: 0;
https://jsfiddle.net/webirus/y3p7z4p5/
Так как шапка фиксированная, но не выбрано позиционирование. И она прибивается к .page.

Тут будет множество мнений и какое реально правильное не сказать точно.
Я для себя выбрал вариант - грузить себе по двум основным причинам.
Во-первых, я оптимизирую шрифты иначе. Как правило требуется гораздо меньше символов, чем заложенов CDN.
Во-вторых, не зависеть от других сайтов. А вдруг гуглофонт упадет?))) Ну, или плохой коннект до CDN.
Мой вариант более затратный по времени. Скачай, оптимизируй, загрузи, подключи.
Я вообще не использую CDN (сейчас в меня полетят камни), но я считаю это правильным.

PageTransitions.js
https://github.com/codrops/PageTransitions
tympanus.net/Development/PageTransitions
Rotate > Cube > To Top