Cannot have double-line header aligned in ag-grid

I have difficulties to align the first line of a double-line header in ag-grid. The grid is configured as:

      <ag-grid-angular
        id="data_grid"
        class="ag-theme-alpine ag-theme-material ag-center-aligned-header" 
        style="width: 2800px; height: 800px; margin-right: 1%; float: left; font-size: 16px !important"
        (gridReady)="onDailyGridReady($event)"
        [rowData]="row_data" 
        [columnDefs]="column_defs"
        [gridOptions]="grid_options">
      </ag-grid-angular>

Then in the ts file:

  column_defs = [
    {
       headerName: 'A',
       'headerClass': "ag-right-aligned-header",
       children: [
          { headerName: 'A1', field, 'A1', ..., 'headerClass': "ag-right-aligned-header", 'cellClass': 'ag-right-aligned-cell'
          },
          ...
       ]
    },
    {
        headerName: 'B',
        'headerClass': "ag-center-aligned-header",
        children: [
           ...
       ]
    }
  ]

The problem I am having is the alignment I put in for the first line header (‘A’, ‘B’) does not work. The first line always aligned to left. What am I missing?