Павел

Потому что div блочный (display:block;) а span нет

Плохо искали
Например просто удалить параметр style
$(this).removeAttr('style');

Или сделать пустым
$('#someDiv').attr('style','');

Или удалить только нужное:

$('.page').css({"width":"", "height":"", "top": "", "left" : ""});

Взять Cms с открытым исходным кодом и на нее натягивать верстку.
Opencart, Magento и т.д.

Берем sublime text или notepad++, выбираем замену в файлах, вводим в строчку что искать:
style=""
вводим в строчку на что заменить
class="новыйкласс"
Вводим в какой папке искать вводные данные
Создаем стиль в css файле

Идете и смотрите документацию по бутстрапу
В бутстрапе нет стилей для адаптивных видео, но легко гуглится по запросу responsive video css, один из вариантов тут

Можно сделать красивее))
Выводить например по 2-3-4 города, а ниже добавлять кнопку Ещё, добавляем js/jquery код спойлера и делаем часть списка спойлером

width:auto;min-width:100px;max-width:100%;

Изображению добавить class img-fluid

Можно с помощью быстрой замены во всех файлах текстовым редактором задать класс к body, или же добавить перед закрытием body скрипт который будет добавлять класс к body, что то вроде:

var hasClass = window.location.href;
hasClass = hasClass.substring(hasClass.lastIndexOf('/')+1, 5);
$('body').addClass(hasClass);

Задаст для body class с названием файла, например about.html получит body class="about"

background-position: center;
должно быть:
background-position: center center;

И проще было бы просто указать:

background: url("../images/page-banner.jpg") 100% 100% no-repeat;
 background-size: cover;

Min-width у контейнера, и у body тоже самое
media only screen and (max-width: 768px) {
.container {
width: 100%;
max-width: 1280px;
min-width: 992px;
}
}

Так правильно, Вы же задаете минимальную высоту и ширину.
Вам нужно: width: 100%; height:auto; и если что ограничить max-with и max-height

Непонятен подход, зачем так тогда вообще делать?
Оберните img в div и задайте что надо для div, а когда появляется img то для него что нужно.
Или сделать так, добавить css, когда есть src то показывать блок, а когда нет скрывать:

img {
    display: none;
}
img[src] {
   display: block;
 }

Пускай нажмет Ctrl и покрутит колесико мыши, возможно у него стоит в браузере нестандартный масштаб

.Child {width:100%;}
.MyText input {width:100%;}

Есть же класс для этого
container-fluid

getbootstrap.com/css/#grid-example-fluid