Алексей Уколов

Они зачёркиваются как раз, чтобы показать вам, что браузер их увидел, распознал, но приоритет выше у другого правила.

В вашем случае применимы оба селектора - и тот, что внутри медиа-выражения, и тот, что снаружи - поэтому применяется тот, что объявлен последним, т.е. с 1945 строки.

Решения два:
1. Переместить медиа-выражения в конец файла стилей.
2. Переписать код:

.modal-popup__form
 padding: 35px 40px 50px 40px

@media screen and (min-width: 481px)
.modal-popup__form 
  padding: 35px 88px 50px 88px

Второе, разумеется, надёжнее.

У вас в коде ерунда полная:
background-image: url('<span id=" title
Это работать не может и не будет.

Должно быть что-то вроде этого:

<section class="hero" style="background-image: url('<?=SITE_TEMPLATE_PATH;?>/img/hero-bg.jpg')">
...
</section>

Никак.

Даже есть вы не можете редактировать оригинальный css, вы всегда можете добавить свой:

var css = '.elem-hover { background: blue; }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

document.querySelector('.elem').classList.add('elem-hover');

Разумеется, это сломается, когда изменятся оригинальные стили и нужно будет обновить код в соответствии с ними.

Для IE 9 и ниже:

<!--[if !IE]><!--><link rel="stylesheet" href="style.css"/><!--<![endif]-->

Для IE 10-11 и Edge - никак и не нужно этого делать. Никто уже очень давно не верстает отдельно под IE.

Можно. Приведённого вами кода вообще нет на странице, если его добавить руками в инспекторе, всё работает.

P.S. Вижу эти стили в файле www.narcolog-24.ru/css/nar.css, но он имеет невалидное содержимое - вы там намудрили с вложенностью и фигурными скобками. Потому и не работает.

Проблему вызывает сама отрисовка метки, а координаты я так понимаю можно из pageX/pageY брать.

Да, координаты нужно брать из события клика.
Отрисовка метки не должна вызывать особых проблем - просто создаёте пустой абсолютно спозиционированный div с нужным классом, а отрисовать круг на css легко.

При изменении размера картинки метки соответственны тоже сдвигаться.

Это придаёт задаче небольшую сложность. Но нужно всего лишь конвертировкать координаты метки при её создании в проценты от карты и позиционировать по ним - тогда зум будет работать как ожидается.

Упрощённый пример: jsfiddle.net/alexey_m_ukolov/Lnvfju2b/24

Конкретная реализация зависит от того какие браузеры вы хотите поддерживать и от прочих особенностей проекта, но идея такая.
В моём примере, впрочем, удалось отказаться от процентов в пользу пересчёта пикселей в зависимости от зума, а за корректное расположение отвечает уже сам браузер. Но я плохо помню, насколько хорошо в браузерах поддерживается zoom, поэтому не могу сказать насколько такая реализация надёжна.
Caniuse говорит, что не будет работать в Firefox, поэтому лучше переделать под transform: scale.

В css у вас инпут должен быть вложен в .noborders, а в разметке он сам и имеет этот класс.

Причина в том, что у родительского контейнера высота не равна сумме высот детей. А не равна она потому, что float вырывает блоки из потока. Не используйте float для раскладки страницы.

Стандартный селект ничего, кроме текста не принимает. Поэтому, либо использовать плагин для имитации селекта из любой разметки, либо смириться.

Ну а поскольку задача у вас, как оказалось, совсем иная, воспользуйтесь последним вариантом.

.rating {
  ...
  flex-direction: row-reverse;
  justify-content: flex-end;
}

CSS не позволяет выбирать соседей слева, поэтому нужно просто перевернуть всю строку.

Картинкой. Нет никакого смысла заморачиваться, кроме спортивного интереса.
У вас спортивный интерес или вы для реального проекта интересуетесь? Если второе, то только картинкой - всё остальное будет ненадёжно/сложно/криво в разных комбинациях.

Через css проще спозиционировать за счёт background-size и background-position, а img нужен, чтобы поисковики проиндексировали картинку.

&:hover,
&:focus,
&:active {
  your: styles;
}