Box-Shadow переносит родительский элемент вместо элемента, к которому он был применен

Question

Демонстрация в реальном времени: Нажмите здесь .

Проблема: Если вы посмотрите мой сайт прямо здесь, вы увидите окно с кодом, которое является просто SVG , Ящик-тень применяется к этому указанному c элементу, но вместо этого кажется, что он покрывает родительский элемент. это происходит только в Safari. Прекрасно работает на Chrome, Edge (хром), Firefox.

HTML:

        <header>
            <div className="cover">
                <embed src={Overlay} alt="Overlay" className="left-main" />
                <embed src={Cover} alt="Cover" className="right-main" />
            </div>

            <div className="container header-information-container">
                <div className="header-information row w-100">
                    <div className="header-content col-md-6">
                        <h1>Main Title</h1>
                        <h2>Subtitle</h2>
                        <p>
                            Fancy caption.
                        </p>

                        <div className="row">
                            <div className="col-md-5 col-5">
                                <Link smooth className="call-to-action" to="/#contact-me" scroll={el => scrollWithOffset(el)}>Hire Me</Link>
                            </div>

                            <div className="col-md-5 col-6 no-padding">
                                <Link smooth className="sub-action" to="/#projects" scroll={el => scrollWithOffset(el)}>See My Work <i className="fas fa-chevron-right"></i></Link>
                            </div>
                        </div>

                    </div>
                    <div className="header-thumbnail col-md-6">
                        <embed src={Code} alt="Cover" className="code" />
                    </div>
                </div>
            </div>
        </header>

S CSS:

header {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 100vh;
    position: relative;
    background-color: $background-light;

    .cover {
        width: 100%;
        float: right;
        z-index: 0;
    }

    .left-main {
        position: absolute;
        right: 0;
        bottom: 0;
        background-position: right center;
        width: auto;
        height: 100%;
        background-repeat: no-repeat;
        transform: translateX(-50px);
        z-index: 1;
    }
    .right-main {
        position: absolute;
        right: 0;
        bottom: 0;
        background-position: right center;
        width: auto;
        height: 100%;
        background-repeat: no-repeat;
        z-index: 2;
    }

    .header-information-container {
        background: transparent;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 3;

        .header-information {
            display: flex;
            align-items: center;

            margin-top: -95px;
            width: 100%;
            height: 100%;

            .header-content {
                padding: 0 !important;

                h1 {
                    font-family: 'Open Sans', sans-serif;
                    font-size: 2.5rem;
                    color: $text-black;
                    font-weight: 700;
                    margin-bottom: 0.5rem;
                }
                h2 {
                    font-family: 'Open Sans', sans-serif;
                    font-size: 1.5rem;
                    color: $secondary;
                    font-weight: 400;
                    margin-bottom: 2rem;
                }
                p {
                    font-family: 'Open Sans', sans-serif;
                    font-size: 1.1rem;
                    color: $secondary;
                    font-weight: 300;
                    margin-bottom: 2rem;
                }
            }

            .header-thumbnail {
                display: flex;
                width: 100%;


                .code {
                    margin: 0 0 0 auto;
                    width: 90%;

                    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
                }
            }


        }
    }
}

Любая помощь будет принята с благодарностью! Заранее спасибо.

Дополнительная информация: я использую странные теги, потому что я использую React, и это одна из причин, почему я использую className вместо class на HTML elements.