Reduce white space around text in mobile

When I look at my site in a mobile view after importing dummy data there’s a lot of padding (not sure if that’s the correct term) to the left and right of the text. So there ends up being a lot of wasted space. I don’t want the text to be full screen per se but I would like it to span a wider area.

You can also see it in the live preview of the demo site. As you shrink the screen width, the text adjusts in steps at specific widths. Right before the adjustment, the text is spanning almost edge to edge, but as you continue to make the screen width smaller it moves to the next size step and there’s a ton of white space to the left and right. This happens over and over as you make the screen smaller. Instead of shrinking in steps where there’s bunch of whitespace after each adjustment, I want it to smoothly adjust the text so it’s always nearly edge to edge.

How do I do this?