Позиционирование объектов на сайте

Есть 3 объекта. Главный текст, подтекст, квадратик, крутящийся текст. Нужно разместить их в ряд по центру картинки.

Я это сделал. Но при начатии сжатие размера странички. Он начинается вести себя неадекватно. Он не сжимается, не убирает отступы. А берет и левая часть уходит направо, а правая налево. Как это исправить ?

HTML

<div class="mainBlock container">
        <div class="scroll-animated delay-20 fadeup blockTitleText">
            <div class="titleText">TERMS OF SERVICE</div>
            <div class="scroll-animated delay-23 fadeup signature"><img src="../img/signature1.svg"></div>
            <div class="marker-square"></div>
            <img class="rotate" src="../img/round.png">
        </div>
    </div>

CSS

.mainBlock {
    margin-top: 169px;
    margin-bottom: 700px;
    position: relative;
    max-width: 900;
    width: 100%;
}

.blockTitleText {
    width: 100%;
}

.titleText {
    font-size: 46px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 900;
    position: absolute;
    width: auto;
    left: 150px;
}

.mainBlock .signature {
    position: absolute;
    right: 560px;
}

.mainBlock .marker-square {
    position: absolute;
    top: 33px;
    right: 530px;
}

.mainBlock .rotate {
    position: absolute;
    top: -50px;
    right: 465px;
}

Можно использовать bootstap