Hello, I have a products page where I return all the values from my product item, it has a title, subtitle, image, and description. The string title and subtitle works fine, as does the image, but when I return the description, which is a Richtext editor, the text won't align and all stays in one line, even if I align the text in the Richtext editor itself.

My code:

@inherits Umbraco.Web.Mvc.UmbracoViewPage

@{ Layout = "Master.cshtml";



    var items = Model.Value<IEnumerable<IPublishedElement>>("productItems"); }


@foreach (var item in items)
{
    var productTitle = item.Value<string>("productTitle");
    var productSubtitle = item.Value<string>("productSubtitle");
    var image = item.Value<IPublishedContent>("productImage");
    var productDescription = item.Value<string>("productDescription");

    <section class="page-section">
        <div class="container">
            <div class="product-item">
                <div class="product-item-title d-flex">
                    <div class="bg-faded p-5 d-flex ml-auto rounded">
                        <h2 class="section-heading mb-0">
                            <span class="section-heading-upper">@productSubtitle</span>
                            <span class="section-heading-lower">@productTitle</span>
                        </h2>
                    </div>
                </div>
                <img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="@image.Url()" alt="" />
                <div class="product-item-description d-flex mr-auto">
                    <div class="bg-faded p-5 rounded">
                        <p class="mb-0">@Html.Raw(productDescription)</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
}

The result for the description:

All the text is on one line. I have to use the Html.Raw method otherwise tags will be included, but the result is the same if I render the pure string as well. Any fixes for aligning the text and not having it all in one line?