How to solve the problem with cross-browser background?

Question

css

Code -
background-color: #4bc8d7;
padding top: 1%
padding-bottom: 2%
During layout, I view the page in Chrome and Safari (on a Mac).
Problem: The background height in Chrome comes out larger, the difference was about 3px.
I've already tried a lot and nothing.
Which more or less brought me closer to the desired result -
min-height: 100%;
height: 570px !important;
height: 100%;
however, the difference was still 0.4 px.

Answer 1

In different browsers, the page height is different, since part of the window is allocated for the panel, the height of the panels is different for different browsers, so I don’t see a problem here.

Answer 2

I would have changed it...
If you save it as you have laid out, then if I understood correctly from your comments, then I would have done this...
1. Changed the styles of main
2. I gave some of the styles of main to container
3. I redid the picture. (I don't know why you need so much space below...)
4. Changed img styles
https://jsfiddle.net/fest1val/p6k7agxm/