Media query being executed after it should - html

Question

I am working with flex items so I think it could be the problem of why my code is making a strange behaviour.
I have .flexContainer class that has a max-width property. After I resize the window, I want to change this max-width property to a higher value but if I set my media query as:
#media screen and (max-width: 850px){
.flexContainer{
max-width: 60%;
}
}
the max-width of the element is changing at 835px instead of 850px.
Here is my code:
HTML:
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
</div>
<div id="right" class="block">Right</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
}
#container{
display: flex;
height: 100%;
background-color: blue;
}
.block{
flex: 1;
}
#left{
background-color: green;
}
#center{
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
}
#right{
background-color: orange;
}
.flexContainer{
flex: 1;
min-width: 100px;
max-width: 50%;
box-sizing: border-box;
height: 150px;
background-color: red;
padding: 10px;
}
.flexDiv{
width: 100%;
height: 100%;
background-color: yellow;
}
#media screen and (max-width: 850px){
.flexContainer{
max-width: 60%;
}
}
JSFiddle in which you can see that the max-width property changes at 835px instead of 850px.
EDIT: I add two screenshots so you can see it:
Why the media query is being executed after it should?

Answer 1

I found my problem here. Just I had to remove the margin of the body tag.
I will try to reproduce the effect that I am having on my real project (in which I have body tag fixed) and edit the question again.
EDIT: It seems that it was a bug or something similar of Google Chrome because I cannot reproduce the error anymore.
The error that I was getting is that when I looked at html tag on my Google Chrome inspector, it gave to me the wrong values for the webpage (around 30px less, and I do not have any padding/margin around it) so I thought that the media queries were being executed in the wrong width of the screen.
I know this is a "stupid" solution but it worked again when I closed and re-opened Google Chrome. Now it works like normal behaviour.