index.js

import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
    </div>
  );
}

Home.module.css

.container {
  height: 100dvh;
  background-image: url('/home.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

I tried adding 0 margin and padding for HTML and body in global.css, playing around with height of 100vh instead, etc. I still see a y-scroll. Why is that appearing? How can I remove it? Thanks!