Как гарантировать, что отступ также влияет на все строки, а не только на первую строку?

Question

Итак, я применил некоторые отступы с помощью Bootstrap к диапазону текста. Однако, когда строка переходит на следующую строку через
, отступ для этой строки больше не применяется.

В частности, для этой проблемы используется следующий код:

            <div class="col-sm-12 d-sm-flex d-md-inline align-items-sm-center justify-content-sm-center ">
                    <div class="py-md-20 mx-md-10">
                            <span class="py-sm-40 px-sm-20 px-md-70">
                                Before any Service or Repair we will carry out a full check of the bike to ensure the bike is safe and you <br> are getting the service that best suits you and your bike. 
                            </span>

                            <span>
                                <button class="b-button__outline text-bg-info"> Book Assessment </button>
                            </span>

                    </div>
                        </div>

Обратите внимание, что внешние таблицы стилей необходимы, чтобы точно увидеть, что происходит. Следовательно, https://codepen.io/nisofwareengineer/pen/ExxyoVR должно помочь вам увидеть проблему более подробно.

Текст '' получает услугу, которая лучше всего подходит вам и вашему велосипеду. «», кажется, не имеет никаких отступов.

Моя цель - сделать так, чтобы это выглядело так:

Что я делаю не так?

Answer 1

Попробуйте

span {
  display: block;
}

или

span {
  display: inline-block;
}