I created an HTML-CSS demo with two simple span tags. I added some content to each span, and applied the same CSS code to both. Surprisingly, the content of the right span goes beyond the border, while the content of the left span stays within the border.
body {
background: #f5f5f5;
}
.container{
background-color: #5b6dcd;
color: #fff;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
width:400px;
}
span{
border: 1px solid black;
margin: 5px;
padding: 5px;
text-align: center;
width: 100px;
}<div class="container">
<span>
This is a box where you can change the width.
</span>
<span>
o1bn-43OCWVIP2fQNVPTQ1QNQrKc
</span>
</div>https://i.stack.imgur.com/S38NX.png
Check out my demo project on CodePen
I'm new to CSS, can someone explain why the content in the right span overflows the border? Thank you for your help.