Can't center grid columns in small/medium device-widths

[tombyers]

I want to center a .grid__col--m-2-of-3 column. But it looks like this selector:

@media (max-width: $toast-breakpoint-medium) and (min-width: $toast-breakpoint-small) {
  &[class*="#{$toast-grid-column-namespace}--m-"] {
    display: inline-block;
    margin-right: -.24em;
  }
   ... 
}

is overriding the display:block; margin-right:auto; of .grid__col--centered. Hence I can't center the column.

Inspector screenshot below:

Is this a bug or am I missing something? Why is the display:inline-block selector necessary? Surely these declarations are by default inherited from .grid__col anyhow?

Thanks