Почему функция CSS calc() не работает?

Вам нужно добавить пробелы между операторами, часто забывают их. Мы также можем вкладывать операции, используя calc столько, сколько захотим, но они эквивалентны простым скобкам.

Из документации:

Примечание. Операторы + и - должны быть окружены пробелами. Например, calc(50% -8px) будет проанализировано как процент, за которым следует отрицательная длина — недопустимое выражение, а calc(50% - 8px) — это процент, за которым следует оператор вычитания и длина. Аналогично, calc(8px + -50%) рассматривается как длина, за которой следует оператор сложения и отрицательный процент.

Операторы * и / не требуют пробелов, но их добавление для согласованности разрешено и рекомендуется.

Примечание. Разрешается вкладывать calc() функций, и в этом случае внутренние функции обрабатываются как простые круглые скобки.

.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>