-3

I just started an app on NextJS and can't seem to remove the white borders around the page. I've used NextJS before and have inspected my previous projects, and even tried copy/pasting the code from there to here and still the white border remains. Please help me remove them! Is there something I'm missing? I've tried several css methods that would allegedly remove the borders (e.g. border: none, margin: 0) but none of them have worked.

the page w/ the white borders

inspection showing that the white border is in the body tag

index.js

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

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

globals.css

html, body {
  margin: 0px;
}

Home.module.css

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: GREEN;
  margin: 0 auto;
}

.main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


@media (max-width: 600px) {
  .grid {
    width: 100%;
    flex-direction: column;
  }
}
Rachel Nguyen
  • 11
  • 2
  • 1
    Hi, welcome to SO! Please include code as text instead of images. – Camilo Aug 21 '23 at 20:47
  • Welcome to Stack Overflow! I suggest taking a [tour](https://stackoverflow.com/tour) and reading [How to Ask](https://stackoverflow.com/help/how-to-ask). And please don't [post pictures of your code/data/errors](https://meta.stackoverflow.com/a/285557/11968910), instead copy and paste the code into a code block using backticks (`) so others can more easily reproduce your error! – Borisonekenobi Aug 21 '23 at 20:51
  • Oh okay, I've gone and replaced the images with code. Thank you! – Rachel Nguyen Aug 21 '23 at 21:09

0 Answers0