Safari (Mac) printing larger than all other browsers - html

Question

I have built 2 pages for an app that uses bootstrap that the end user ends up printing a submission form after filling out some info.
I am have written the styles for the #media print i am using page-break-after to break the 2 container divs into 2 pages. All of this works exactly as expected except on Safari on a Mac. This prints perfectly on IE9 & 10, Firefox, Chrome and even Safari on a PC. It also prints perfectly on Chrome and Firefox on a Mac. These all print out exactly the same except Safari on the Mac it prints everything larger which pushes my second page to a 3rd page.
Here is the basic structure of my 2 printed pages the container div is only 600px wide.
<!-- First Page -->
<div class="container page-break">
<div class="row">
<div class="col-sm-12 center">
IMAGE HERE
</div>
</div>
<div class="row">
<div class="col-sm-12 center">
TEXT HERE
</div>
</div>
<div class="row">
<div class="col-sm-12 center">
ANOTHER IMAGE
</div>
</div>
<div class="row">
<div class="col-sm-7">
MORE TEXT
</div>
<div class="col-sm-5">
MORE TEXT
</div>
</div>
</div>
<!-- /.First Page -->
<!-- Second Page -->
<div class="container page-break">
<div class="row">
<div class="col-sm-12 center">
HEADER IMAGE HERE
</div>
</div>
<div class="row">
<div class="col-sm-12 center">
LONG SET OF TEXT HERE
</div>
</div>
</div>
<!-- /.Second Page -->
Any tips to make Safari on a Mac print like all the other browsers would be great. It is worth mentioning that these need to print without changing any print settings in the browser.

Answer 1

I had a similar situation and the solution was is in this answer; you have to define a specific size in the provided example of the answer, like this, to make smaller or larger the size of your containers when printing (specially the Bootstrap's container class):
#media print {
html, body, main, header, footer, .container {
...
min-width: 800px !important;
...
}
}