title: How to make HTML fit perfectly within a PDF?
body: <p>Decided to make my resume using HTML and CSS, and I'm having issues with setting the size of the page. I have all of my content wrapped in a div tag that is meant to emulate the size of an A4 PDF. Whenever I go to print my page, it overflows on the right side. I'm learning how to use CSS grid for this project, and I've heard it doesn't always play nice when trying to print.</p>
  <p>The A4 paper size for 150 PPI screens is 1240 x 1754, so that's what I set the height and width of the <code>.page</code> div to. I'm using the &quot;Save as PDF&quot; setting built into Google Chrome to view the HTML as a PDF</p>
  <p>HTML:</p>
  <pre><code>&lt;body&gt;
     &lt;div class=&quot;page&quot;&gt;
        &lt;div class=&quot;page-top&quot;&gt;
           [insert content]
        &lt;/div&gt;
        &lt;div class=&quot;line&quot;&gt;
           &lt;hr&gt;
        &lt;/div&gt;
        &lt;div class=&quot;page-left-col&quot;&gt;
           [insert content]
        &lt;/div&gt;
        &lt;div class=&quot;page-right-col&quot;&gt;
           [insert content]
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.page {
      display: grid;
      width: 1240px;
      height: 1754px;
      grid-template-rows: 20% 1% 79%;
      grid-template-columns: 35% 65%;
      grid-gap: 25px;
      font-family: Rubik;
      font-weight: 400;
      background-color: lightgray;
      font-size: 18px;
  }
  
  .page-top {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr 1fr;
      margin: 96px 96px 0px 96px;
  }
  
  .line {
      grid-column: span 2;
      margin:  0px 96px 0px 96px;
  }
  
  .page-left-col {
      margin: 0px 0px 96px 96px;
  }
  
  .page-right-col {
      margin: 0px 96px 96px 0px;
  }
  </code></pre>
  <p>The margins are set to emulate a one inch margin in a normal word document.</p>
  <p>I also am using CSS grid display in several other nested divs within my page, if needed, I can provide more context there. But I don't think they should affect anything because they are limited in size by the parent div <code>.page</code> and they don't overflow unless I am trying to print the page as a pdf.</p>