I have a block of text formatted in the following way
<div class="container">
<p style="text-align: center;">
<span style="text-decoration: underline;">
<strong>
<img src="//cdn.shopify.com/s/files/1/0652/9219/files/Horizontal.jpg?13817493546805475501" alt="">
</strong>
</span>
</p>
<p style="text-align: center;">
<span style="text-decoration: underline;">
<strong>The Hosting</strong>
</span>
</p>
<p>
The in-laws are arriving, friends are in town, and everyone is heading to your abode for a night filled with holiday cheer. As stress levels tend to rise during these events, expenses do as well. Here are a few tips to nail your hostess game, without breaking the bank and <em>still</em> shopping consciously.
</p>
</div>
I am interested in preserving the full-width images inside the container but altering only the text within the paragraph tags to appear indented on both sides or with margins, without affecting the images themselves. I'm unable to modify how the code is generated, meaning the images will always be wrapped in paragraph tags.
This snippet represents just a portion of the entire content on the page, containing various images and text sections.
My goal is to apply CSS styles specifically to the text within paragraph tags while keeping the images untouched. Any suggestions would be appreciated.
View an example on JSFiddle here: https://jsfiddle.net/jpautt8v/