Why is some of my CSS not working in Safari?

Question

Here is my code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 160;
    font-family: Cochin;
}

body {
    width: 90%;
    margin: auto;
}

header {
    background: url("../images/background_cover.jpg");
    background-size: cover;
    h1, h3 {
        display: grid;
        place-items: center;
        color: white;
        padding: 1.5rem;
    }
    h3 {
        font-size: clamp(1rem, 1.2vw, 3rem);
        padding: 2rem;
    }
}

Everything else seems to work fine but the h1, h3 {} block. I've tested a few other css files too that are not mine and the issue seems to persist. I've switched to Chrome for a bit and everything seems to look great but I would prefer to understand the issue and continue with safari.

I've also looked up solutions online, cleared my cache, disabled extensions and nothing has seemed to work.

Answer 1

CSS nesting is a very new feature added to css, that is probably why it doesn’t work in safari.
Instead you can either use Sass or to just not nest selectors.