Hopefully the image I've marked up describes the issue easily enough. The red bordered figure containing the image is not centered, despite the paragraph above centers fine. Both elements are in the same flexbox container. Seemingly the figure doesn't obey its flexbox parent in anyway.
HTML:
.stepDescriptionContainer { position: relative; display: flex; flex-direction: column; align-items: center; border-style: solid; border-color: aqua; margin: 0px 0px; padding: 0px 0px;}.stepDescriptionContainer p { position: relative; margin: 0em 0em; padding: 0em 0em; text-align: center; font-size: 0.9rem; --fontOpticalSize: 23; /*Increase with increasing font size 8-144*/ border-style: solid;}.stepImageFigure { position: relative; display: flex; flex-direction: column; margin: 0px 0px; padding: 0em 0em; width: 500px; border-style: solid; border-color: rgb(255, 17, 0);}.stepDescriptionContainer img { object-fit: contain; width: 100%;}<div class="stepDescriptionContainer"><div class="triangle"></div><p>We begin with carefully selected kiln-dried hardwoods, ensuring a precise 8% moisture content. This critical measure guarantees the stability and longevity of the final piece. Skilled craftsmen painstakingly inspect each plank; imperfections like deadwood in burls and edges are removed, unveiling nuanced details that enrich the final piece. This stage lays the foundation for the impeccable quality that defines our creations.</p><figure class="stepImageFigure"><img src="..\images\Home\WalnutBlueEpoxyResinTable Part1.png" alt=""></figure></div>An important point which you cant see is that the CSS above is within a media query, whereby stepImageFigure goes from position: absolute to position relative. But I don't see how that would be causing the issue.
I've tried display: grid, and as many combinations of justifying and aligning you could imagine. Reshuffled the HTML with no success, cross checked all spelling. Spent about 5hr trying to find an answer or alternative.
The expectation is for the figure to be centered and position accordingly to its flexbox parent.
Thanks for any help