Q:

@media screen units are not pixels, so what are they?

This is what I want 
If browser is bigger than 900px I want the boxes to be 700px.
Once the browser width is smaller than 900px I want the boxes to be 600px.
@media screen and (min-width : 750px) and (max-width : 900px) {
    .multiSelect .checkboxLayer {
        width: 600px;
    }
}
@media screen and (min-width: 900px) {
    .multiSelect .checkboxLayer {
        width: 700px;
    }
}

My question is, how come the browser width splits around 932px and not 900px?
What units are these if not pixels? 
 
I just tried to measure the browser width with photoshop and it splits at 975 px exactly.
So CSS says 900 px, Chrome says 932 px and photoshop says 975 px
This is really confusing?!?!

A:

The short answer:
You have not reset the box-sizing property for the parent container. 

The long answer:
Consider this:

In CSS, by default, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.

There are two values in box-sizing that you should know about

content-box

[...] the default, and gives you the default CSS box-sizing behavior. If you
  set an element's width to 100 pixels, then the element's content box
  will be 100 pixels wide, and the width of any border or padding will
  be added to the final rendered width.

border-box

[...] tells the browser to account for any border and padding in the
  value you specify for width and height. If you set an element's width
  to 100 pixels, that 100 pixels will include any border or padding you
  added, and the content box will shrink to absorb that extra width.
  This typically makes it much easier to size elements.

I usually start any CSS sheet with the following to avoid such issues 
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}

There are many frameworks that reset more of the default properties such as normalize.css but I often don't have the need to use them. 

I set up a demo below. There are two div elements. There is also a media query.
Both elements have the same fixed width in px. The only difference is the value for the box-sizing
The first is set to border-box and the second is set to content-box

div {
  width: 400px;
  height: 400px;
  margin: 3em;
  text-align: center;
  background: darkred;
  border: 20px solid #131418
}

@media (max-width: 800px) {
  div {
    background: darkgreen;
    width: 300px;
  }
}

.first {
  box-sizing: border-box
}

.second {
  box-sizing: content-box
}
<div class="first"></div>
<div class="second"></div>

Notice how they render with different sizes even when the width for both is the same? 

