Flex容器内figure元素无法居中但p元素正常的问题求助

希望我标注的图能清晰说明问题——带红色边框的figure容器没有居中，但它上方的段落却能正常居中。这两个元素都在同一个flex容器里，但figure好像完全不听flex父容器的指挥。

相关代码 #

CSS（位于媒体查询内）

.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%;
}

HTML

<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>

有个重要细节是上面的CSS是在媒体查询里的，其中stepImageFigure的position会从absolute切换成relative，但我实在想不通这会导致居中问题。

我已经试过改用display: grid，也试了各种justify和align的组合，调整过HTML结构，检查了所有拼写，花了大概5小时找解决方案或者替代方法，但都没用。

我的预期是这个figure能居中，并且能正常跟随flex父容器的布局。

求各位大佬帮忙解答，谢谢！

备注：内容来源于stack exchange，提问作者Toby Tanfield