html - 如何确保填充也影响所有行而不仅仅是第一行？

Question

所以我通过 Bootstrap 对一段文本应用了一些填充。但是，当该行通过 < br > 转到下一行时，该行之后的填充将不再适用。

具体针对该问题的代码如下:

            <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;
}