KononovD

мне нравится компонентный подход, соответственно css разделен на файлы. стили я пишу примерно так:

.header {
    background: #fff;
    
    &::after {
        content: "";
        background: #000;
    }

    &:hover{
        background: #000;

        &::after{
            background: #fff;
        }

        .header__box{
            background: #fff;
        }
    }

    &__box{
        background: red;
    }
}

и отдельным файлом медиа, как правило уже без scss, привык так)
да и это (вложенность) не всегда нужно

А что там делать-то?

макет должен быть расчерчен дизайнером, если нет - нарисуйте линии бутстрапа в фотошопе сами, погуглите как.

а вообще..
берем, открываем container, row, col-lg-3 и col-lg-9 (или какие там размеры колонок, наугад писал)
в col-lg-3 запихиваем блоки, что слева, очевидно, а в col-lg-9 запихиваем заголовок, картинку и текст.. все до безумия просто)

а куда деть левую колонку на телефонах - уже сами думайте)

p.s. всем картинкам у себя в проекте поставьте max-width: 100%; max-height:auto display:block;

Зум происходит из-за того, что картинка плохо подходит по размеру, очевидно)
Т.е. она растягивается по высоте, а сам браузер тянет ее и по ширине так, что бы сохранялись изначальные пропорции

вообще,

background: url("pass/to/img") no-repeat center / cover;

должен сделать приемлемую картинку)