CSS calc() not working [duplicate]

To quote MDN

The + and - operators must always be surrounded by whitespace. The
operand of calc(50% -8px) for instance will be parsed as a percentage
followed by a negative length, an invalid expression, while the
operand of calc(50% - 8px) is a percentage followed by a minus sign
and a length. The * and / operators do not require whitespace, but
adding it for consistency is allowed, and recommended.

Space your stuff out, and it will probably work.