Horizontal scrolling of a row in a grid

I would like to horizontally scroll a row, that should occupy 100% of the width of the page, without it overflowing out of the background image and also keeping the header text in focus.

What I tried:

• Applying overflow to grid. Using overflow on grid will contain grid items in an invisible box and forces it to be centered, ignoring the flex-start direction i want. Also, scrolling through the grid items will hide the previous items out of focus.
• Applying overflow to Box. The Box tag is a wrapper for the whole page and while applying overflow allows the row to be scrolled through without the grid items being contained and centered, the header text isn't kept in focus and scrolling through the items will cause the header text to be out of focus.

Is there any to achieve a scrollable row that also keeps header text in focus?

Thanks!

Code:

const pages = [
  {
    name: "one",
    route: "oneR",
    image: oneImage,
  },
  {
    name: "two",
    route: "twoR",
    image: twoImage,
  },{
    name: "three",
    route: "threeR",
    image: threeImage,
  },{
    name: "four",
    route: "fourR",
    image: fourImage,
  },{
    name: "five",
    route: "fiveR",
    image: fiveImage,
  },{
    name: "six",
    route: "sixR",
    image: sixImage,
  },
  
];

export const Home = (props) => {
  const [option, setOption] = useState('Option 1');

  const handleChange = (event) => {
    setOption(event.target.value);
  };

  return (
    <ThemeProvider theme={homeTheme}>
      <CssBaseline />

      <Box
        display="flex"
        justifyContent="center"
        alignItems="center"
        minHeight="100vh"
        sx={{
          backgroundImage: `url(${backgroundImage})`,
        }}
      >
        <Container>
          <Typography variant="h2" component="h2" paddingTop={6}>
            TEST HEADER
          </Typography>

          <Select
    labelId="Selectoptions"
    disableUnderline
    variant="standard"
    defaultValue={option}
    value={option}
    onChange={handleChange}
    IconComponent={KeyboardArrowDownIcon}
    MenuProps={{
      
      sx:{
        '.MuiMenu-paper' : {
          outline:'solid 4px',
          marginTop:"4px",
        outlineColor:"white",
          backgroundColor:'black',
          width:"32%",
          borderRadius:"0px"
        }
      }
    }}
    sx={{backgroundColor:"transparent", width:"35%", height:"6vh", outlineColor:"white", outlineStyle:"solid", outlineWidth:"3px", marginTop:"1%",
    '.MuiSelect-iconStandard' : {
      marginRight:'2%',
      stroke:"white",
      strokeWidth:'2px'
    }
  }}>
    <MenuItem value={"Option 1"} disableRipple><Typography variant="h5" sx={{marginTop:'5px'}}>Option 1</Typography></MenuItem>
    <MenuItem value={"Option 2"} disableRipple><Typography variant="h5" sx={{marginTop:'5px'}}>Option 2</Typography></MenuItem>

  </Select>
  {option === "Option 1" && (
    <div sx={{maxWidth:"100%"}}>
          <Grid
            container
            alignItems="center"
            justifyContent="center"
            direction="row"
            wrap="nowrap"
            spacing={{ xs: 1, sm: 1, md: 3 }}
            sx={{ paddingTop: "4%", paddingLeft:"110%", paddingBottom: "2%",}}
          >
            {pages.map((page, index) => (
              <Grid item xs="auto" sm="auto" md="auto" key={index}>
                <OverlayPreview
                  name={page.name}
                  route={page.route}
                  image={page.image}
                />
              </Grid>
            ))}
          </Grid>
          </div>
  )}
  {option === 'Option 2' && (
          <Grid
            container
            alignItems="center"
            justifyContent="center"
            spacing={{ xs: 1, sm: 1, md: 3 }}
            sx={{ paddingTop: "2%", paddingBottom: "2%" }}
          >
            <Grid item xs={10} sm={5} md={3}>
              <OverlayPreview
                name={"Option"}
                href={"https://www.google.com"}
                image={cImage}
              />
            </Grid>
          </Grid>
          )}
        </Container>
      </Box>
    </ThemeProvider>
  );
};