Why the sizes are different in Chrome and Safari (Media Query Problem)

Question

https://keuper-school.herokuapp.com/

I have used media queries but in safari browsers with smaller screen sizes, the sizes are different and cannot see some sections.

@media screen and (max-width: 1256px) {
    .hots{
        flex-wrap:wrap;
    }
}

Its not wrapping properly. Sizes are wrong and some contents are missing

Answer 1

You need to remove display:flex from the body of the page.