FluentUI Details List - Can't center column header text

Question

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 onRenderHeader method as a column prop and I have tried it this way to no avail:

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 here is the control

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

I have highlighted the element that I am trying to target in the screenshot below

I have tried the onRenderHeader with some different selectors and different props: I have tried something like this:

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",
          },
        },
      },
    },
  });
};

I have also tried other selectors under the "root" styles like:

      "< *": {
            justifyContent: "center !important",
            backgroundColor: "green",
          },

and other style properties like cellTitle and cellName

styles: {
cellTitle: { backgroundColor: "purple", justifyContent: "center" },
cellName: { backgroundColor: "purple" },
root: {
backgroundColor: "blue",

        selectors: {
          ".ms-DetailsHeader-cell": {
            whiteSpace: "normal",
            textOverflow: "clip",
            lineHeight: "normal",
            justifyContent: "center",
            textAlign: "center",
            backgroundColor: "red",
          },
          ".ms-DetailsHeader-cellTitle": {
            height: "100%",
            alignItems: "center",
            justifyContent: "center",
            testAlign: "center",
            backgroundColor: "pink",
          },
          "< *": {
            justifyContent: "center !important",
            backgroundColor: "green",
          },
        },
      },