Serj-One

Ни в коем случае не слушайте тех, кто советует делать это через .css(). Это дурной тон, никогда не нужно менять слили непосредственно через js.
Задавайте нужные стили классу-модификатору, и добавляйте/удаляйте его через .addClass() / .removeClass()

overflow-x: hidden; для секций с выступающими элементами. Сомневаюсь что существует решение лучше.

Выступающий элемент с фикс. шириной - факт.
overflow-x: hidden для html и body не работает на мобильных при использовании вьюпорт.
Варианты решения:
1) Правильный - найти выступающий элемент и починить.
2) Костыль - задать overflow-x: hidden для отдельной секции, в которой имеется выступающий элемент.
P.S. Код не смотрел, поэтому, что именно выступает, не скажу.

Что за ад у вас в разметке? Зачем вы суёте .container внутрь .container-fluid, и тем более .container в .row? Зачем присваиваете класс .col-md-2 тегу img?
1) Вся секция - это .about-project. Присваивать ей ещё и .container-fluid не имеет смысла.
2) Нельзя использовать .container внутри .container-fluid. Выбирайте что-то одно.
3) .row всегда внутри .container. Размещать .container внутри .row нельзя.
Вот верный вариант вашей разметки:

<section class="about-project">
    <div class="container">
        <div class="row">   
            <div class="about-project__img col-md-2">
                <img src="#" alt="О проекте">
            </div>            
            <div class="about-project__descr col-md-10">
                <h2 class="about-project__title">О проекте</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum maiores voluptates assumenda veritatis maxime nemo laborum, voluptatibus ea ipsa necessitatibus, architecto odio distinctio numquam ut, eaque consequatur quo! Debitis.. </p>  
            </div>
        </div>
    </div>
</section>

Проверил все блоки никакой из них не выступает

Плохо проверял.

Конечно.
www.owlcarousel.owlgraphic.com/demos/animate.html - доки по анимациям для второй версии.
owlgraphic.com/owlcarousel/demos/transitions.html - аналогично для первой.
Используем animate.css Sliding Entrances, или пишем любую свою анимацию, и крутим куда хотим и как хотим.

На css - нет. На js - конечно. Ищи родителя родителя, и делай с ним что хочешь.

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

Родителю для карты - position:relative; Карте - ширину с запасом и абсолютное позиционирование от левого края родителя. Всей секции - overflow-x: hidden, чтоб скрыть выступающую вправо часть карты.

Owl Carousel 2 - если поддержка IE меньше 10-го не нужна.
OWL Carousel 1.3.2 - если нужна поддержка версий постарше (в разумных пределах).
Уже больше 2-х лет использую только его.

Псевдоэлементы.

<section>
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  </div>
</section>

.container {
  width: 500px;
  height: 200px;
  margin: auto;
  background: green;
  position: relative;
}
.container:before {
  content: '';
  display: block;
  width: 1000px;
  height: 100%;
  background: green;
  position: absolute;
  left: -1000px;
  top: 0;
}

section {
  overflow-x: hidden;
}

codepen.io/Serj-One/pen/KzKWOO

Судя по версии "5", у тебя сафари для Win.
Выбрось бяку, и никогда больше руками такое не трогай. Эта поделка хуже древнейших IE, проверять в ней вёрстку бессмысленно априори.

z-index