Dismissible Banner Content Alignment Issue (RTL Site)

Support
1

Hello,
I am using Discourse and attempting to create a dismissible banner using the “Banner Topic” feature. My site language is Persian (RTL - Right-to-Left).
I have added HTML content with inline styles to the first post of the topic, and the banner appears correctly, but I am encountering difficulties with centering the content horizontally within the banner frame.
Problem:
The content inside the banner, by default, appears aligned to the right. When attempting to center it, it does not align perfectly, and specifically, the first line of text appears slightly offset to the right compared to other lines or blocks of content within the banner. This misalignment persists regardless of the content of the first line.
Attempts Made to Center:

Using standard CSS text-align: center; on the main div container within the post’s HTML.

Result: Content remained right-aligned.

Using text-align: center !important; on the main div.

Result: Content still remained right-aligned.

Using the deprecated HTML align=“center” attribute on the main div.

Result: This did shift the content towards the center, but the alignment between the first line/block and subsequent lines/blocks was imperfect, with the first line appearing slightly offset to the right relative to the others.

Simplifying the internal HTML structure (e.g., combining text lines into fewer paragraphs using
).

Result: Did not resolve the alignment issue between the content blocks.

Attempting to add a manual negative margin-left to the first paragraph/block.

Result: Did not effectively correct the alignment in a consistent way.

Tested across different browsers (Chrome, Firefox).

Result: The issue is consistent across browsers.

Example HTML Structure Used in the Originating Post (Simplified):


HTML<div align="center" style="background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; padding: 10px;">

  <p style="font-size: 1.1em; font-weight: bold; color: #333;">
    First Line / Block of Text (e.g., Title)<br>
    Second Line within the same block (e.g., Subtitle)
  </p>

  <p style="margin-top: 15px;">
    Another Block (e.g., Link line)
  </p>

</div>

(Note: Using align=“center” here because text-align: center had no effect).

Observation / Suspected Cause:

Given that text-align: center does nothing, and align=“center” works partially but results in imperfect internal alignment, I suspect there is a CSS rule within the Discourse theme or core banner rendering that is interfering. The space reserved for the dismiss (‘X’) button on the left side of the banner in the RTL layout might also play a role in how the remaining content area is centered.

Question:

What is the recommended method to achieve perfect horizontal centering of content within a dismissible banner created via “Banner Topic” on an RTL Discourse site? Is there a specific CSS snippet that needs to be added to the theme customization (acknowledging this requires admin privileges) to correctly override conflicting rules and ensure precise centering of the banner content block?

Any guidance or insight would be greatly appreciated!

Thank you.