Actually, making a paragraph responsive is not difficult at all. In fact, it requires no CSS at all. It’s just a case of not adding any CSS that will break its naturally responsive behaviour.
To explain what you have been shown is that
margin: auto will centre a block, while the text flow within the block is aligned by the
Paul’s example uses the
<br> to explicitly define line breaks, then the
display: table with “shrink-wrap” the element width to the longest line length in the text.
Example from dresden_phoenix and John use
max-width to constrain the block width, here the lines break naturally where they run out of space within the given width, no need for
Without any width constraint at all, the block will fill the full width and appear to be aligned as the text is.
This example may be something like you tried, with spans (displayed as blocks) explicitly defining line breaks, instead of
display: table shrink-wraps the width, as in Paul’s example.