title: Margin changes in every page in HTML Django Template
body: <p>I have created a django template from the following code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;style&gt;
          * {
              box-sizing: border-box;
          }
  
          .grid-container {
              width: 21cm;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
          }
  
          .page {
              width: 21cm;
              height: 29.7cm;
              padding-top: 1.5362cm;
              padding-bottom: 1.5362cm;
              padding-left: 0.5122cm;
              padding-right: 0.5122cm;
          }
  
          .grid-row {
              display: flex;
          }
  
          .grid-col {
              margin-left: 0.0854cm;
              margin-right: 0.0854cm;
              width: 9.9024cm;
              height: 3.7552cm;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #eee;
          }
  
          img {
              max-width: 100%;
              height: auto;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;grid-container&quot;&gt;
      {% for page in imglist %}
      &lt;div class=&quot;page&quot;&gt;
          {% for row in page %}
          &lt;div class=&quot;grid-row&quot;&gt;
              &lt;div class=&quot;grid-col&quot;&gt;
                      &lt;span style=&quot;text-align: center&quot;&gt;
                          Yantraksh Logistics Pvt Ltd
                  &lt;img src=&quot;data:image/png;base64,{{ row.image }}&quot; alt=&quot;&quot; srcset=&quot;&quot;&gt;
                          &lt;br&gt;
                          {{ row.label }} &lt;br&gt;
                          {% if row.lname  %}
                          {{ row.lname }}
                          {% else %}
                              _____
                          {% endif %}
  
                      &lt;/span&gt;
              &lt;/div&gt;
              &lt;div class=&quot;grid-col&quot;&gt;
                      &lt;span style=&quot;text-align: center&quot;&gt;
                          Yantraksh Logistics Pvt Ltd
                  &lt;img src=&quot;data:image/png;base64,{{ row.image }}&quot; alt=&quot;&quot; srcset=&quot;&quot;&gt;
                          &lt;br&gt;
                          {{ row.label }}&lt;br&gt;
                          {% if row.lname  %}
                          {{ row.lname }}
                          {% else %}
                              _____
                          {% endif %}
                      &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          {% endfor %}
      &lt;/div&gt;
      {% endfor %}
  
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Th first page is rendered correctly but as soon as the pages increase the margin starts reducing and the page starts merging together, I am not familiar with this, so any help is appreciated.</p>
  <p>I am adding the first page and 9th page for better understanding</p>
  <p>First Page:</p>
  <p><a href="https://i.stack.imgur.com/bhpxh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bhpxh.png" alt="enter image description here" /></a></p>
  <p>Ninth Page:</p>
  <p><a href="https://i.stack.imgur.com/f54pQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f54pQ.png" alt="enter image description here" /></a></p>
  <p>Please Help!!!</p>
  <p>Margin is set to None in Printer, Scale Default and Size A4</p>