Hello gemmajoom

1. Please use this CSS to Template Options -> Custom Code -> Custom CSS

   .com-content.view-article .article-details p{
    display: flex;
    justify-content: center;
   }

2. It is possible to control the image height with CSS.
3. Here we have used an image. You can change the image with CSS by changing the value of the content property below.

   .com-content.view-category .article>a:before {
    content: url("images/category-arrow.svg");
   }

Best regards

1. with the script you suggest I get the text centered, but always full width as if it were a fluid row; instead I would like the text justified, but within the limits, as seen in your preview of the Gourman template (see image attached above or link below).

2. i tried to edit this part of css:

img {
     display: block;
     max-width: 100%;
     height: auto;
}

putting height: 300px; but the image is also reduced in width, instead the width should remain full page.

3. I think there are two arrow addresses, because with the css indicated by you only the arrow on the thumbnails of the blog list is corrected, but if I enter an article and go down to the bottom of the page where I see the other news, there the arrow is still green (I put link below)

1. The sample/demo article is created with SP Page Builder and there the columns are 2+8+2. Left and Right 2 columns are empty. You can take SP Page Builder Article and create this easily.
2. The image is perfectly shown. I do not see any issue here.
3. In your shared link, I cannot see the arrow. Please check it.