In CSS when I mention (max-width: 800px) browser should load that style when screen reaches 800px but my browser load that style in 720px why that's happening?

This is CSS media query

```
@media (max-width: 800px) {
  #header-home {
    height: 30rem;
    .header-content {
      padding-top: 5rem;
    }
  }
}

```

It's not working after it reaches below 800px width of screen. But it works when screen reaches below 720px

![](https://i.stack.imgur.com/FtT4x.jpg)