Unfortunately, my go-to answer for this is: use Firefox. Chrome does not support print-specific CSS very well. They used to, but things broke a few years ago and it's terrible now. Neither does Edge. My audience is largely Windows business users, so not too much Safari out there. Firefox handles things around repeating headers, page breaks, etc. much better than the other browsers. Sadly, this is very much a browser-specific topic.

As for what I normally do: I have a master layout specifically for print with a logo, no navigation elements, and a body and container div where all the print stuff goes. I have a "no-print" CSS class that I can put on any element I don't want to show up on the print, but I might still need to display even in the print view, such as a print or close button. This class simply hides the element when the media is print. Sometimes I set the print orientation and paper size. Depends on what it is needing to be printed. I also have some page break directives for certain content.

It's not something we have to do very often nowadays. I usually have a print button that opens a popup with a separate master layout. The data is the same, but there is no navigation bars, no ads, no banner etc... Also, I have a specific print class on the body, so I format the width of the body to fit in A4.

Also, since there is a print class on body, I can customize sub styles/classes as I see fit. Let's say I have a table with black background headers, it's not cool for printing, so I'll change it like so:

/* default */
.mytable th {
    background: black;
    color: white;
}

/* printing version */
.print .mytable th {
    background: transparent;
    color: black;
}

No need of media queries, it'll work in very old browsers as well.