Both your original and the first answer are working as expected. See this JSFiddle
I added a background-color property to show you hide wide your div
is. The div
is centered on the page, but the text is overflowing outside of the box, because it is one continuous word and your browser doesn't want to break up a single continuous word. If you had multiple words in that box such as hello hello hello ...
that wouldn't be an issue, because they would automatically wrap.
If you want to force your text to wrap you can use the word-wrap: break-word
property, as shown in this example.