When I resize the window size in browser the elements in header are not responsive like this:

but when I use Toggle device toolbar it is responsive even in small devices:

Why is that?

I want to have a responsive page like what the inspect tool shows me.

I use nowrap in my header:

.header {
    color: #c76c2c;
    width: 100%;
    height: 100px;
    position: fixed;
    background-color: #ebebeb;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    margin-right: 0;
    z-index: 1000;
    display: grid;
    white-space: nowrap;
}