Why isn't all the children's background color the same as the parent's one HTML CSS if there is a line break separating the two, for example if my font-size is 20:
<div style="background-color: rgba(0,0,0,0.5);font-size: 20px;"><span style="text-align:left; color: blue;">Roberto#3<span style="float:right;">18:21</span></span></div>it works perfectly, but if my font size is 130
<div style="background-color: rgba(0,0,0,0.5);font-size: 130px;"><span style="text-align:left; color: blue;">Roberto#3<span style="float:right;">18:21</span></span></div>The content width is greater than the element containing it, and it is floated, it will "overflow" outside of its container. Then we can add overflow: auto; to the containing element to fix this problem :
<div style="background-color: rgba(0,0,0,0.5);font-size: 130px; overflow: auto;">
<span style="text-align:left; color: blue;">Roberto#3<span
style="float:right;">18:21</span></span></div>