Дмитрий

используйте flex, для многострочного текста никакие извраты с vertical-align и line-height не помогут.

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

Включите эмуляцию айфон в хроме и сморите с помощью dev tools, что там вообще

Либо image, map, area либо svg, polygon

li.setAttribute("class", "li-item-img");

Я всегда делаю полную верстку сначала, с адаптивностью (если требуется).
При этом сразу применяю какие-то вещи, с которыми будет удобно работать в дальнейшем при интеграции (если знаю, на какую систему надо интегрировать).
Потом, в ходе интеграции уже не отвлекаюсь на стили, а занимаюсь только backend / front JS.

Добавьте атрибуты всем блокам внутри родителя
Выбирайте по имени тега
Да способов миллион) вы же фронт девелопер судя по надписи?

return $this->hellow_world()

Hello пишется без w ;)

Потому что
1. Pull-left и pull-right не влезают на одну строку
2. После них поставьте div class=Clearfix
3. Подвал будет выглядеть норм

Вместо pull-left и pull-right лучше используйте grid с колонками под разные размеры, тогда бутстрап сам решит когда сдвигать их, а когда поставить рядом.

Но если вам надо строго рядом, то выставляйте у pull-left и pull-right width:50%, а контент внутри должен либо сжиматься либо прятаться через overflow:hidden