Breaking words in cards

[sforztrejto]

Even though I typed “overflow-wrap: break-word;” words are not broken. Where could be the error.
Below is the css code

.card {
font-family: Arial;
font-size: 21px;
text-align: center;
color: black;
background-color: #E6E6FA;
overflow-wrap: break-word;
max-width: 650px;
}

#answerBox {
padding: 1em 0;
margin-left: 3%;
margin-right: 3%;
border-radius: 1.3em;
margin-top:3%;
margin-bottom:6%;
overflow-wrap: break-word;
background-color: rgba(0, 0, 0, .08);
box-shadow: 15px 15px 20px gray;
max-width: 600px;
}

#answerBox2 {
padding: 1em 1;
margin-left: 10%;
margin-right: 10%;
border-radius: 0.5em;
margin-top:2%;
margin-bottom:2%;
overflow-wrap: break-word;
background-color: rgba(0, 0, 0, .08);
max-width: 600px;
}

#slpl{
margin-top: 1%;
margin-bottom:3%;
margin-left: 10%;
margin-right: 10%;
font-weight: bold;
overflow-wrap: break-word
}

…
​

[NameLessGO]

W3Schools CSS overflow-wrap demonstration

Seems like your max-width: 650px;, represented by the blue box, is large → text aren’t breaking through, which would activate overflow-wrap: break-word

Changing to 300px, and using the same sentence as above

overflow-wrap: break-word

overflow-wrap: normal