Flextable horizontal align on Shiny page (the table, not the content)

I've been trying to align flextable left on my shiny app, with no luck. I can do it in rmarkdown/Word - export (as explained here), but not on Shiny page.

Example code:

ui <- fluidPage(

    fluidRow(
      uiOutput("flex")
    )
)
ui

server <- function(input, output) {

output$flex <- renderUI({
    tbl <- head(mtcars)

    return(flextable(tbl)) %>%
             htmltools_value()        
  })
}
server

When running this, flextable is centered.

How to align it to left? (or margin-left: 0; margin-right: auto). I've been trying to play around with css, but seems something overrides my settings even if I tag it with !important in the .css file.

The below picture: If I go to Inspect mode and set the .tabwid table align-left property to 0, table gets aligned left. But if I set this property in my css file, and then load the app, the table first appears aligned on left side, but then quickly gets centered again.

Thanks for the help,

-Kari

I don't know how you define specify the table in the css file but I think thats the problem. I solved it with this code

ui <- fluidPage(
  shiny::tags$head(
    tags$style(
      ".tabwid table {margin-left: 0px !important;}"
    )
  ),

  fluidRow(
    uiOutput("flex")
  )
)
server <- function(input, output) {

  output$flex <- renderUI({
    tbl <- head(mtcars)

    return(flextable(tbl) %>%
      htmltools_value())        
  })
}
shinyApp(ui, server)

Please note the .tabwid table selector in the style tag I think this is the important step.

Hopes this helps!!