whoisthere

— БЭМ
— Основы адаптивной верстки - Google

Видео урок - Юрий Артюх

Оберни карту в DIV
И задай ему флоат.

Ваш пример
С кодом

Ширину контейнера, намеренно сделал меньше для наглядности. Все работает.
Может вы путаете CSS PX WIDTH и DEVICE PX WIDTH ?
Чтоб Ваши медиа запросы отработали, они должны грузится последнюю очередь иначе их перекроет дефолтный CSS.

Установите иницилизацию OWL карусели в конце страницы перед </body>, чтобы неприпятствовать отрисовке страницы.

Возможно для ссылок в JS инициализации для ссылок прописано:
event.preventDefault

Эта опция отменяет действия браузера по умолчанию.
Или где-то прописано в CSS:
pointer-events: none;

Потому, как браузеры по-своему рендерят шрифты.
Попробуйте следующее:
-webkit-font-smoothing: antialiased;
или
-webkit-font-smoothing: subpixel-antialiased;

Работать будет только в вебкитах.

CodePen

Картинку background-ом можно добавить.

Normalize

Bullets

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

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="media.css" media="only screen and (min-width: 768px) and (max-width: 1024px)">

Если медиа выражение не отрабатывает. Значит работают основные стили. При достижении BreakPoint они переключаются на стили из медиа запроса. При условии если они подключены после основных. Иначе придется городить вредные !important