Сергей

HTML5 и CSS3 для чайников.
Разумеется, там не всё. Если вы будете заниматься сайтами, вам предстоит купить ещё не одну и не две книги.

Как вариант: В адаптивном дизайне есть метод, использующий несколько картинок разного размера.
В JS создаётся скрипт, который грузит "тяжелый рисунок" только если разрешение монитора велико.
Если разрешение "не дотягивает", то используется картинка поменьше.

Что почитать: почитайте книгу " Добавь воздуха! Основы визуального дизайна для графики, веба и мультимедиа". Выше вам правильно написали: нужно дизайнить минималистично.

Программист целый день разгребает логические ребусы на тарабарском языке. Заставлять делать такое целый день - врагу не пожелаешь.

Позаботьтесь об углах. Обклейте их картоном, или тряпками.

Это зависит от вашего уровня знаний и умений.
Сначала вы будете делать CSS-стили внутри HTML-файла.
Потом вы будете делать отдельный файл .CSS.
Потом вы подключите CSS-помогайки, например, reset.css и у вас будет несколько CSS. Я сейчас именно на этом этапе.
Потом вы начнёте использовать сборщики.
Потом вы будете всё это разумно комбинировать.
Удачи.

Может, написать скрипт PHP?
Человек вводит логин и пароль, скрипт их принимает и выдаёт ссылку.

Поподробнее, плиз. Откуда вы собираетесь подгружать таблицу?

Я понимаю, что я зажратый маськвич, но...
Переезд создаст вам КУЧУ различных проблем, даже если вы ВООБЩЕ не работаете.
Мне уже 33 года, после травмы позвоночника я решил идти во фриланс. Но у меня есть своя комната и мама наливает мне тарелку супа, за что ей огромное спасибо. Понимаете? Эта тарелка супа решает всё! Я встаю в 5-6 утра и у меня есть еда в холодильнике! При переезде такого не будет. Не надо сжигать за собой мосты.

Итак, мой совет. Идёте к маме и просите тарелку супа. Каждый день встаёте в 5-6 утра и учитесь. Много учитесь. Очень много учитесь.

Буквально на днях начал переводить readme последней версии Fancybox. Итак:
Если у вас есть набор связанных элементов, который вы хотите сгруппировать, всуньте в `rel` "групповое имя":

<a href="large_1.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a>
<a href="large_2.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_2.jpg" /></a>

Скажите, а может... Не поворачивать его вовсе? Может, лучше заменить его в час "X" другим треугольником, смотрящим в нужную сторону?

Если игра простенькая, то можно хранить так в виде JS-массива, где перечислены:
1 - все объекты,
2 - их тип (враг, холмик, сундучок...),
3- их характеристики (куда враг смотрит, сколько жизней в сундучке),
4- их координаты (где они находятся)
Разумеется, ещё нужна сама карта уровня, к которой будут применяться данные из этого массива.

Вот замечательная статья на Хабре, посвященная разработке игр для новичков. Если вкратце, советуют начать с крестиков-ноликов, не замахиваясь на 3D-JMMORPG.

Решил вашу проблему. вот тут :-)
Что характерно - долго не запускалось на jsfiddle.net, а на моём компе всё работало.
Догадался указать единицы измерения.
Было так: background-position: 0 15;
Стало так: background-position: 0px 15px;

Пользуйтесь на здоровье!

У вас ошибка в написании адреса картинки в блоке с id="block21". И с DIV-ами что-то не так, 1-й, вроде, лишний. Кроме того, не в обиду, код очень перегружен. Также ужасная ситуация с id и class. Далее, вы указываете размеры картинок в HTML-коде. Пожалуйста, делайте это через CSS.
Теперь к самому процессу. Судя по вашему CSS-коду, вы выравниваете блоки, используя margin и padding. С текущим кодом, у вас даже первой картинки не получается, все блоки выровнены по центру и идут сверху вниз, друг под другом. Вы даже не написали, как именно вы их хотите выровнять. Всегда по 2 блока в ряд? Или это меняется с размером окна?
Я упростил ваш код, выкинув оттуда не имеющие отношения к предмету обсуждения вещи.
Может, такое поведение блоков вам нравится больше? тыц!

А какое у вас разрешение на мобильнике? Бывает так, что в мобильниках с высоким разрешением, браузер принимает экран мобилы за настольный монитор.
Если проблема именно в этом, то посмотрите решение вот тут: "Готовим адаптивный сайт к Retina дисплеям"

самый "фронтальный" способ решения вопроса
Конечно, тут есть подводные камни. Например, если выравнивать нечётное количество блоков, то не получится использовать всё пространство до конца. Три блока по 33% дадут 99%, а не 100%.
Если есть немного времени, лучше переделать разметку сайта под flexbox, как вам посоветовали выше.
Удачи.