Why is my CSS Calc not working?

Today I was trying to track down a really weird issue whilst following an example online. Trying to debug the issue, and finally comparing file by file each line, the only difference I could find was that I had:

width: calc(100%-10px);

Whilst the demo I was following had:

width: calc(100% - 10px);

I changed the line in my CSS file and everything started working again! Taking a look at the Mozilla documentation, the reason is clear in the very first note. You must surround the operator with whitespace, otherwise, the Calc CSS function will not execute correctly!