title: Printed web page looks very different from actual page
body: <p>I'm trying to set up online invitations. One of the means of sending said invitations is by print. Unfortunately, though I have the invitations looking like I want on the web page, when I go to print, the result is quite different. <a href="https://mycowabungas.com/invitations/sample-print.htm" rel="nofollow noreferrer">Here is a sample set of invitations.</a> The invitations are placed on a 2x2 grid, with the text overlaid in HTML and placed at certain percentages from the top and left of the images. When I go to print, there are three things that don't come out right. In order of weirdness:</p>
  
  <ol>
  <li>The text color is different. To be specific, it's always black, no matter what color is specified in CSS.</li>
  <li>The text overflows the image, even though there's some JavaScript that's supposed to adjust the text size to fit the image.</li>
  <li>The invitations do not appear on a 2x2 grid.</li>
  </ol>
  
  <p>Some notes about the CSS: all rules are applied within an <code>@media all</code> block, and there is an <code>@page {size: landscape}</code> block to make the page print in landscape, as suggested <a href="https://stackoverflow.com/questions/138422/landscape-printing-from-html">here</a>. Bootstrap is being used; I can dispense with it if needed. HTML and body are tags are set to height and with 100%.</p>