div没有包裹住span,span显示在了div之外

Question

红色背景的div怎么才能包裹住文字
红色这块div没有包裹住白色的文本框（span组成的文字）
而是由最外层的div(蓝色)包裹住了

<div class="main">
    <div id="left-page" class="leftSty">
      <div class="left-header"></div>
      <div class="left-footer">
        <div class="spa">
          <span>尊敬的kehu:</span><br>
        </div>
      </div>
    </div>
 </div>

  .main {
    width: 100%;
    height: 100%;
    background-color: rgb(241, 241, 241);
  }
  #left-page {
    width: 50%;
    height: 100%;
    float: left;
    overflow: hidden;
  }
  .leftSty {
    background: url("../../assets/ycb/BG.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .left-header {
    width: 100%;
    height: 10%;
    background: url("../../assets/ycb/logo2.png") no-repeat;
    margin-left: 15px;
    margin-top: 15px;
  }
  .left-footer {
    width: 80%;
    height: 72%;
    background: url("../../assets/ycb/rwts.png") no-repeat;
    background-size: cover;
    transform: translate(-150px, 153px);
    background-color: blue;
  }
  .spa {
    position: absolute;
    font-size: 0.9vw;
    line-height: 27px;
    font-family: "auto";
    padding-top: 8%;
    padding-left: 49%;
    width: 130%;
    height:50px;
    background-color: red;
    clear: both;
  }

Answer 1

你应该给白色文档的div一个背景色是这个意思吗？那就不是单独给一个div了呀