Power Platform Community Forum Thread Details

I am creating a PCF that uses the FluentUI control Details list. I am trying to center the header text of the last column and I can't seem to reach the span that would justify-content for the header text. Can someone help me pinpoint my error?

I am using the onRenderDetailsHeader method and I have tried it this way to no avail:

const onRenderDetailsHeader: IRenderFunction<IDetailsColumnProps> = (
 headerProps,
 defaultRender
) => {
 if (!headerProps || !defaultRender) {
 //technically these may be undefined...
 return null;
 }
 return defaultRender({
 ...headerProps,
 styles: {
 root: {
 selectors: {
 ".ms-DetailsHeader-cell": {
 whiteSpace: "normal",
 textOverflow: "clip",
 lineHeight: "normal",
 justifyContent: "center",
 textAlign: "center",
 },
 ".ms-DetailsHeader-cellTitle": {
 height: "100%",
 alignItems: "center",
 justifyContent: "center",
 testAlign: "center",
 },
 },
 },
 },
 });
};

Here is my column definition.

 {
 key: "col_failStatus",
 name: "Status",
 ariaLabel: "Pass/Fail Status",
 fieldName: "failStatus",
 minWidth: 70,
 maxWidth: 300,
 onRender: (spec: SpecResult) => (
 <span className={classNames.textDetail}>{spec.failStatus}</span>
 ),
 onRenderHeader: onRenderDetailsHeader,
 },

And my details list:

 <DetailsList
 key={useId("detailsList")}
 items={specs}
 columns={columns}
 selectionMode={SelectionMode.none}
 layoutMode={DetailsListLayoutMode.justified}
 isHeaderVisible={true}
 />

See the last column in my screenshot:

Here is a screenshot where I centered the column header by changing the justify-content css of a span. I don't know how to reach this span with my code.