Q:

CSS calc() function doesn't seem to work correctly

In the pictures below the viewport width is 400px and the width of the progressbar is 300px. 
If I arrange the progressbar via hardcoded values in the middle it works perfectly, see code and picture below:
@media (max-width:999px) {
    #containerProgressbarPageLoad{
        position:relative;
        margin-left: 50px;
        margin-right: 50px;
    }
}

But If I use the calc() function to do this job, I will get an inexplicable result, see code and picture below:
@media (max-width:999px) {
    #containerProgressbarPageLoad{
        position:relative;
        margin-left: calc(50vw-150px);
        margin-right: calc(50vw-150px);
    }
}

Why is calc not returning 50px?  50vw(=200px)-150px should be 50px. 

A:

You need spaces in your calc() declaration:
calc(50vw - 150px) not calc(50vw-150px)
EG:

@media (max-width: 999px) {
  #containerProgressbarPageLoad {
    background:red;
    position: relative;
    margin-left: calc(50vw - 150px);
    margin-right: calc(50vw - 150px);
  }
}
<div id="containerProgressbarPageLoad">containerProgressbarPageLoad</div>

