Html 仅在文本中使用背景跨距

我不能只在我的文本中制作我的背景..一直到屏幕结束。 知道我做错了什么吗

这是我的HTML：

<div class="textSlide">
     <span id="firstTitle">We help you find everyone you</span>
     <span id="secondTitle">need to get you started.</span>
     <span id="thirdTitle">Look Ouch is an online meeting point where all kinds</span>
     <span id="fourthTitle">of artists can unite to make ideas happen.</span>
</div>

---

将

显示：块更改为
显示：内联块

将
显示：块更改为
显示：内联块


.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: block; padding: 5px; }

.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }

.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: inline-block; padding: 5px; }

.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }