Zooming in makes div hover over fixed-position img - html

Question

I have a header which has an img for the logo (position: fixed) and a grid which is centered using margins, which contains whatever except for the logo is in the header. The HTML looks something like this:
<div id='header'>
<img id='logo' src='http://i65.tinypic.com/dw2nw9.png'>
<div id='header-grid'>
<div id='item-one'></div>
<div id='item-two'></div>
<div id='item-three'></div>
<div id='item-four'></div>
</div>
</div>
And the CSS looks like this:
#header {
position: fixed;
width: 100%;
height: var(--header-height);
background-color: var(--main-color);
z-index: 3141592;
}
#logo {
position: fixed;
max-width: 100px;
max-height: var(--header-height);
padding-left: 10px;
}
#header-grid {
width: 900px;
margin: 0 auto;
height: var(--header-height);
display: grid;
grid-template-columns: auto auto auto auto;
}
Now, when I zoom in, the #header-grid goes over the #logo. I want them to stay next to each other instead of one going on top of the other

Answer 1

Found a grid solution for you:
#header {
position: fixed;
width: 100%;
height: var(--header-height);
background-color: var(--main-color);
z-index: 3141592;
display: grid;
/* add the following */
grid-template-columns: 1fr repeat(2, auto) 1fr; /* not sure about grid but you need the repeat so the second column can be centred */
justify-items: center;
}
#logo {
max-width: 100px;
max-height: var(--header-height);
margin-left: 10px; /* change this to margin as you shouldn't add padding to images */
margin-right: auto; /* add this to push to the left */
}
#header-grid {
margin: 0 auto;
height: var(--header-height);
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-start: 2; /* add this so it sits in centre */
/* for demo */
width: 300px;
border: 1px solid red;
}
<div id='header'>
<img id='logo' src='http://i65.tinypic.com/dw2nw9.png'>
<div id='header-grid'>
<div id='item-one'></div>
<div id='item-two'></div>
<div id='item-three'></div>
<div id='item-four'></div>
</div>
</div>