Why display grid with 100% in grid-template-columns goes out of body?
The issue isn't with width:100% like you think. It is with grid-template that you made 40% 60% and you also have a grid-gap of 5px which will make the total more than 100%.
Instead rely on the fr unit to split the free space considering the gap:
.parent {
position:fixed;
width:100%;
left:0;
top:14px;
display:grid;
grid-template-columns:4fr 6fr;
grid-gap:5px;
background:#eee;
}
.left {
border:2px solid red;
}
.right {
border:2px solid red;
}<div class='parent'>
<div class='left'>LEFT</div>
<div class='right'>RIGHT</div>
</div>