I'm Yoda

Для простоты понимания.

HTML - то, что видит пользователь (внешний вид сайта)
PHP - функциональная часть

Скорей всего один делал верстку, а второй эту верстку натягивал на движок

Возможно потому, что у вас стоит 144 DPI например. Поставьте 72 DPI. Обычно из-за этого не стыковка происходит.

У 4 версии для маленьких экранов по умолчанию классы col-1, col-2, col-auto не исключение. Классы col-sm-* начинают работать от ширины экрана 540px, если меньше то col-(1,2,3...12) и т.д. Так же col-* без префикса sm, md можно использовать если у вас блок на всех экранах будет одного размера. Например
<div class="col-12"></div>

В вашем случае.

<div class="row">
          <div class="col-auto">
                    <a href="#" class="button button_right">Скачать</a>
          </div>
          <div class="col-auto">
                    <a href="#" class="button">Подробности</a>
          </div>
</div>

либо flex ручками пишем, либо bootstrap 4

Owl Carousel 2

Я делал подобное. В шаблоне компонента в файле result_modifier.php делаешь выборку через GetList. Перед перезаписью $arSection в массив $arResult["SECTION"] загоняешь нужное тебе количество разделов.

Так?

<div class="section">
            <div class="container">
                <div class="section-description">
                    <h1>Description</h1>
                    <img src="http://cdn.iphonehacks.com/wp-content/uploads/2013/09/iphone_5c_ios_7.png" alt="image" />
                </div>
            </div>
        </div>

body{
                padding: 0;
                margin: 0;                
            }
            .section {
                position: relative;
                background-color: lightblue;
                overflow: hidden;
                min-height: 100vh;
            }
            .section::after{
                content: "";
                position: absolute;
                top: 0;
                right: -80%;
                width: 100%;
                height: 100%;
                background-color: white;
                transform: skew(45deg);
            }
            .section .container{
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;
            }