Generating PDF using puppeteer has unwanted white border

A white border is added on my PDF when generated using Puppeteer. How can I prevent it from adding this border?

Based on the CSS, it should be a square PDF with 1080 x 1080px with a header and footer of 80px.

Here is the code on my backend:

  async function printPDF() {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.setContent(html) // See what is stored in the "html" variable below
    const pdf = await page.pdf({
      path: pdf/storage/location, 
      printBackground: true, 
      height:'1080px', 
      width: '1080px',
    }); 
    await browser.close();
  }

This is the HTML file created on my frontend: (I pass it as a string to the backend)

export function CarousselHTML(props) {

  return (
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style
          dangerouslySetInnerHTML={{
            __html: `

          .page {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
          }

          .line {
            font-size: 40px;
            font-family: roboto;
          }

          .center {
            margin-left: 100px;
          }

          .top {
            background-color: pink;
            height: 80px;
            width: 100%;
            padding:  0px 80px;
          }

          .content {
            background-color: green;
            width: 100%;
            height: 920px;
            padding:  0px 80px;
          }
          
          .bottom {
            background-color: blue;
            height: 80px;
            width: 100%;
            padding:  0px 80px;
          }
          
          .swipe {
            justify-content: center;
            height: 60px;
          }
    
        `,
          }}
        />
      </head>
      <div className="page">
        <div className="top">
        </div>
        <div className="content">
          <div className="line">some text</div>
          <div className="line">some text</div>

          <div className="group">
            <div className="line">some text</div>
            <div className="line">some text</div>
          </div>
          <div className="group">
            <div className="line">some text</div>
            <div className="line">some text</div>
            <div className="line">some text</div>
          </div>
        </div>
        <div className="bottom">
          <div className="swipe">
            <img src="http://localhost:3000/pdf/swipes/swipe.svg" />
          </div>
        </div>
      </div>
      <div className="page">
        <div className="top">
          <div className="line">some text</div>
        </div>
      </div>
    </html>
  );
}