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

Question

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.

Answer 1

The + and - operators in calc must always be surrounded by whitespace.

Answer 2

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>