Child div getting wider than parent on CSS grid, with content queries

Do not use width:100vw because in some browsers it includes the scrollbar width. So when your content overflow the area, the scrollbar appears and 100vw becomes larger than the available horizontal space.

Use this instead:.

homepage-header {   
width: 100%;   
min-height: 100vh;
} 

Also if content are dynamic and you dont have a fixed design with children element, you can optionally add overflow-x:hidden to prevent horizontal scrollbar

Side note: You may use css clamp for managing the font size based on the viewport size.