Why the CSS calc() function is not working? [duplicate]

You need to add spaces between operators, it’s a common mistake to forget them. We can also nest operation using calc as many as we want but they are equivalent to simple parentheses.

From the documentation:

Note: The + and - operators must be surrounded by whitespace. For
instance, calc(50% -8px) will be parsed as a percentage followed by a
negative length—an invalid expression—while calc(50% - 8px) is a
percentage followed by a subtraction operator and a length. Likewise,
calc(8px + -50%) is treated as a length followed by an addition
operator and a negative percentage.

The * and / operators do not require whitespace, but adding it for
consistency is both allowed and recommended.

Note: It is permitted to nest calc() functions, in which case the
inner ones are treated as simple parentheses.

.one {
  background: red;
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2)); /*Same as calc(20px + (40px * 2))*/
  height: calc(100px - 10px);
  padding: calc(5% + 10px) calc(5% - 5px);
}

<div class="one">

</div>

Same logic when dealing with max(),min() and clamp() since they accept the same argument as calc()

Related: Why doesn’t min() (or max()) work with unitless 0?