title: How to remove margin or padding added to the top of page from using bootstrap 4.4.1 when printing using window.print and selecting thinner paper size?
body: <p>This is what my page looks regardless of width of the window..
  <a href="https://i.stack.imgur.com/HPwlU.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p><a href="https://i.stack.imgur.com/6OjZw.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>No added margin or padding at top.
  Now this is what happens when I do window.print() and select a wider width paper size.<a href="https://i.stack.imgur.com/jlUtq.png" rel="nofollow noreferrer">enter image description here</a>. No problem still no added margin but when I try to select a thinner paper size, this what happens..<a href="https://i.stack.imgur.com/9Po39.png" rel="nofollow noreferrer">enter image description here</a>. You can see there is added margin or padding at the top and I found out that this is what gives me from importing the bootstrap.min.css 4.4.1. Here is what happens when I don't import bootstrap and select even thinner paper size..<a href="https://i.stack.imgur.com/95woV.png" rel="nofollow noreferrer">enter image description here</a>. Which is good but since I am using the bootstrap for styling of my whole project, I cannot proceed like this. So please help me solve my issue. Thank you in advance.</p>
  <p>Note that I already tried setting margin, padding using @media print. This what I did but nothing happened at all.<a href="https://i.stack.imgur.com/jA1pr.png" rel="nofollow noreferrer">enter image description here</a> For real it looks like there is an element above html element. See picture, this is where I set border style for body and other element so I can tell where is the body. <a href="https://i.stack.imgur.com/mkGE7.png" rel="nofollow noreferrer">enter image description here</a></p>