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

"vh и vw" погуглите

https://jsfiddle.net/webirus/bLbc377j/3/
С точными размерами поиграйтесь сами.

От сердца отрываю. Прелоадер нужно поместить сразу после открывающего body, чтобы не проскакивали незагруженные части страницы перед показом прелоадера.
Всё в одном блоке, чтобы удобней было ставить и удалять его при необходимости и стили, скрипты работали более корректно.

<!-- 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(){
            $('.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 -->

Либо SEXSUAL<br>WELL BEING - разрыв руками,
либо SEXSUAL WELL BEING - неразрывный пробел.
Это можно сделать через Jquery например, если нет доступа к HTML.
К чему-то у вас доступ есть ведь?))) Через CSS точно нельзя)
https://jsfiddle.net/webirus/8pzjghwx/3/

display: inline-block;
А то навыдумывали тут разного.

https://jsfiddle.net/3cdz1fjh/3/
https://jsfiddle.net/3cdz1fjh/4/

Наставника нет, брать какие-то проекты на фриланс и разбираться на ходу боюсь.

Как раз для этого и нужен наставник.
На сайтах фриланса есть такая практика: вы берете наставника из топ-списка.
Он вам отдает простые задания за небольшую оплату.
Проверяет и говорит, что не так и что нормально.
Вам практика, ему заказ и процесс с заказа.
Поищите на сайтах фриланса.

Через CSS никак.

block {
position: fixed;
left: 50%;
transform: translateX(-50%);
}

ul {
margin: 0; padding: 0;
}

Тут целая огромная коллекция

Пойди туда, не знаю куда.
Принеси то, не знаю что.

Можно. Ничего страшного особенно не будет.
Главное не переборщить, сделав их очень много.

Если нужна НЕ адаптивная сетка, задайте блоки ручками через CSS, а картинки повесьте на фон тега А.
У вас всего 4 типа блоков. Вот и сделайте общий класс и вспомогательный.