Forum How do I...?

Text overflows right paper edge

I have an HTML5/CSS page whose style contains

@media print {
	@page {
		size: A4 portrait;
		margin: 25mm 15mm;
		margin-inside: 25mm;
	body {
		margin: 0;
		padding-top: 0;
		padding-bottom: 0;
		widows: 2;
		orphans: 2;
		background-color: #ffffff;
		color: #000000;
	main {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		max-width: none !important;
		min-width: unset !important;
		background-color: #ffffff;
		color: #000000;

when I print it, Prince generates correctly the PDF but the text column in wider than the page and overflow on the right paper edge. I do not understand why. Any idea?
  1. prince_overflow.jpg98.6 kB
    Cover and first page of book
Are there any other style rules or inline styles in the document that might be affecting the widths?
Yes, it is possible and I am working on that. Is there a debug or log mode that allows to know which style is really Prince applying? Something similar to the inspect mode of browsers? It might help.
Personally I use the browser inspector for that. :D
The browser inspector does not work if you have different styles for @media only screen and @media print. The problem occurs ONLY with @media print section of style. On the screen is ok.
Interesting. I did not know of that feature. Anyway Chrome emulation does not give the same result of Price. Prince output is much better.