CSS calc function not working in Chrome 해결

현상

CSS calc 함수가 동작하지 않고, 개발자 도구를 보면 다음과 같이 느낌표 표시가 되어있다.

해결

calc 함수 안에 +나 -를 넣을 때에는 좌우에 공백이 있어야 한다.
다음과 같이 공백을 넣어주면 해결된다.

출처 : https://developer.mozilla.org/ko/docs/Web/CSS/calc()