Shiny checkbox misaligned when using custom CSS

I am usng the following CSS recommended in some other post for my Shiny checkboxGroupInput, and it mostly works. Produces a grid of checkboxes that are aligned well on the left. But, then, there is quite a bit of misalignment in other columns of the checkbox grid.

  tags$head(
    tags$style(
      HTML(
        ".checkbox-inline {
                    margin-left: 0px;
                    margin-right: 16px;
          }
         .checkbox-inline+.checkbox-inline {
                    margin-left: 0px;
                    margin-right: 16px;
          }
        "
      )
      )
    ),

See below image output. What can I change to make it display in a proper way? Number of items in the check box group varies, and the width of the item also varies.

UPDATE:

Based on the answer below, I am using the following in the Shiny dashboardBody:

tags$head(
    tags$style(
      HTML(
        ".wrapper-grid{
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          grid-template-rows: repeat(2, 1fr);
          grid-column-gap: 0px;
          grid-row-gap: 0px;
          }
        "
      )
      )
    )

And, I am using the following in the following for the checkboxGroupInput, and yet, my misalignment isn't going away. What am I doing wrong in wrapping this into Shiny?

tags$div(align = 'left', class = 'wrapper-grid', checkboxGroupInput(
        inputId = 'myID',
        label = 'Select my IDs:',
        choices = unique(rl$ID),
        selected = unique(rl$ID),
        width = '1000px',
        inline = TRUE
        )