how to fix the misalignment between header and body in a DT datatable?

Im having trouble getting the header and the body aligned in a DT element.

Whenever i try to sort by any column, the misalignment occurs. The only way to fix it is to resize the entire browser so the table automatically resizes and aligns everything back together. Still, if i sort again, it will get disaligned again

My current code for that table in the server part is

#Render de tabla 5 = Direccionamientos por IPS
dt5 = DT::datatable(df.prescripciones.6.direccionadas, 
                    rownames = FALSE,
                    callback = JS("$('table.dataTable.no-footer').css('border-bottom', 'none');"),
                    options = list(dom = 't',
                                   scrollX = TRUE,
                                   pageLength = 20,
                                   autoWidth = T,
                                   headerCallback = JS(headerCallback),
                                   #order = list(list(ncol(df.prescripciones.6.direccionadas) -1 , 'desc')),
                                   columnDefs = list(list(width = '380px', className = 'dt-left'   , targets = 0),
                                                     list(width = '60px' , className = 'dt-center' , targets = 1:ncol(df.prescripciones.6.direccionadas)-1 )
                                   ))) %>%  DT::formatStyle(names(df.prescripciones.6.direccionadas),lineHeight='80%')  %>% 
  formatCurrency( ( 2 : ncol(df.prescripciones.6.direccionadas) ), digits = 0)

output$table5 = DT::renderDataTable( dt5 )