Print preview margin of print-hidden part in chrome new version

There are 2 problems in the css.

1) The media print should be at the end2) by mistake you have added a comma in the code after the display:none.

@media print{.hidden-print,tr.hidden-print,th.hidden-print,td.hidden-print{display:none !important},#main-container {    margin-left: 0px!important;}}

The correct CSS would be:

#sidebar {    width: 200px!important;    opacity: 1;    position: fixed;}#main-container {    margin-left: 200px!important;}@media print{.hidden-print,tr.hidden-print,th.hidden-print,td.hidden-print{display:none !important}#main-container {    margin-left: 0px!important;}}

first check the fiddle https://jsfiddle.net/ceh185bw/11/

I did 2 things ,

1- put the print at botom

2- over ride the margin for container

#sidebar {    width: 200px!important;    opacity: 1;    position: fixed;    border: 3px solid;}#main-container {    margin-left: 200px!important;    border: 3px solid;}@media print{.hidden-print,tr.hidden-print,th.hidden-print,td.hidden-print{    display:none !important;}#main-container {margin-left: 0px!important;border:1px solid;border: 3px solid;}#main-container {    margin-left: 0px!important;}}

The theme you are using looks fancy, so I'm guessing there is a transition involved in collapsing and showing the sidebar.

If that is the case, then the solution can be found here: https://www.lockedowndesign.com/chrome-print-preview-differs-from-dev-tools/

In short: disable all the transitions in your print stylesheet (media="print") on all elements by applying

* {  -webkit-transition: none !important;  transition: none !important;}

...or wrap it up in '@media print' in a regular style sheet.

In your print style, you set the sidebar's width to 0px, but Chrome has barely started animating the width (due to the transition) when it takes the printing snapshot, hence: a margin that is still visible!