calc(): when width is a percentage minus spacing

Useful to know

calc() calculates a value in a CSS expression. The example width: calc(100% - 2rem); denotes a width that is with 2rem less than the corresponding percentage base. A function is useful when one part of the size is relative and another follows a different unit of measurement. [1]

Around operators plus and minus leave intervals : calc(100% - 2rem), rather than calc(100%-2rem). Types and units must be allowed for the expression and for the property. This is not an arbitrary JavaScript expression placed in a styles table. [1]

If the block overflows again, check padding, border and box-sizing. Subtracting spacing from width does not override the other rules of the box model. For simple spacing between columns, gap often expresses the intention more directly, while calc is suitable for actual relation between dimensions.