To make mx-auto work successfully and centre the item horizontally, one of the following conditions must be true:

1. The element in a block-level element (or display: table).

2. The element has a fixed width (or max-width) smaller than its container.