My text background always extends beyond the screen. Can anyone help me figure out what I'm doing wrong?
Here is the HTML code:
<div class="textSlide">
<span id="firstTitle">We assist you in finding all the individuals you</span>
<span id="secondTitle">need to kickstart your project.</span>
<span id="thirdTitle">Look Ouch serves as an online hub where artists of all kinds can come together to bring ideas to life.</span>
<span id="fourthTitle">.</span>
</div>
And here is the CSS code:
.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;
}