Некоторые проблемы CSS

Question

Я работаю над личным проектом. На пути к обучению веб-дизайну и разработке.

На самом деле я сейчас работаю над Bulma Framework.

Так что просто знайте, что я использую Bulma Framework (bulma.io)

Так что да, у меня было несколько проблем.

Я построил это:- Изображение

Ну, я думаю, что я только что получил это, чтобы работать, много возиться с позиционированием и всем остальным. Это совсем не отзывчиво, когда я изменяю размер окна, все просто ломается. Я хотел бы увидеть, как вы будете строить это быстро. Обратите внимание, что я использую столбцы, предоставленные BULMA, чтобы выровнять их рядом друг с другом.

Это мой код

  <div class="columns is-gapless centered">
    <div class="column is-one-quarter">

                  <img src="https://bulma.io/images/placeholders/128x128.png" class="mainImg">

                </div>
                <div class="column is-one-quarter">
                  <div class="boxtext">
                    Lorem Ipsum Im dor dor dorLorem Ipsum Im dor dor
                    Lorem Ipsum Im dor dor dorLorem Ipsum Im dor dor dorLorem  
                    Lorem Ipsum Im dor dor dor Lorem Ipsum Im dor dor dor


                  </div>
                </div>
              </div>

Мой CSS для предметов, которые я сделал:

 .columns.is-gapless.centered {
    margin: 0 auto;
    width: 100%;
}
img.mainImg {
    width: 1200px;
    height: 400px;
    margin-bottom: -10%;
    margin-left: 104%;
}

.boxtext {

    position: absolute;
    white-space: pre;
    left: 41%;
    margin-top: 2%;
    color: #000;
    font-family: Montserrat;
    font-weight: 500;
}