Почему мой список перекрывается с содержимым над ним в Safari?

Question

Я занимаюсь разработкой сайта здесь: http://www.shahspace.com/assertivesolutions/

Пожалуйста, посмотрите на этот сайт в Chrome и Safari.

В обоих браузерах уменьшите ширину доэто пойдет.

В Chrome это должно выглядеть так:

Chrome http://www.shahspace.com/asquestions/chrome.png

В Safari это выглядит так:

Safari http://www.shahspace.com/asquestions/safari.JPEG

Как вы можете видеть, в Safari главное меню перекрывается с содержимым над ним.Почему это так?

Устранить эту проблему самому сложно, поскольку у меня нет доступа к компьютеру Apple (фото выше было сделано на моем телефоне в магазине Apple).Safari для Windows 10 недоступен, так как они прекратили поддержку Safari для Windows.

Сайт написан на React.Вот код:

App.js:

import React, { Component } from 'react';
import './App.scss';
import Header from './Header/Header';
import Banner from './Banner/Banner';

class App extends Component {

  render() {
    return (
      <div>
        <Header />
        {/* <Banner /> */}
      </div>
    );
  }
}

export default App;

App.scss:

.flex-row-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.flex-column-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex-row-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.flex-column-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.flex-row-space-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-column-space-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-row-space-around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.flex-column-space-around {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.flex-row-space-evenly {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.flex-column-space-evenly {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

Header.js:

import React, { Component } from 'react';
import './Header.scss';
import '../App.scss';
import logo from '../assets/images/logo.png';
import assertiveSolutions_PNG_804x197 from '../assets/images/assertive solutions 804x197.png';
import assertiveSolutions_SVG_163x38 from '../assets/images/assertive solutions 163x38.svg';
import ContactMethod from './ContactMethod/ContactMethod';

class Header extends Component {

    render() {
        return (
            <section>
                <div className="main flex-row-space-between">

                    <div className="logo-name flex-row-start">
                        <div className="flex-column-center">
                            <img className="logo-img" src={ logo } alt="logo.png" />
                        </div>
                        <div className="spacer">{/* spacer */}</div>
                        <div className="flex-column-center">
                            {/* <img className="logo-text" src={ assertiveSolutions_SVG_163x38 } alt="assertive solutions 163x38.svg" /> */}
                            {/* <ReactSVG src={ assertiveSolutions_SVG_163x38 } /> */}
                            <object id="E" type="image/svg+xml" data={ assertiveSolutions_SVG_163x38 } width="320" height="240">
                                <param name="src" value={ assertiveSolutions_SVG_163x38 } />
                            </object>
                        </div>
                    </div>

                    <div className="contact-search-menu flex-column-space-between">
                        <div className="contact-methods flex-row-space-between">
                            <ContactMethod methodType={'phone'} />
                            <ContactMethod methodType={'email'} />
                            <ContactMethod methodType={'search'} />
                        </div>
                        <div className="flex-column-end">
                            <ul>
                                <li>Home</li>
                                <li>About Us</li>
                                <li>What We Do</li>
                                <li>Our Blog</li>
                                <li>Testimonials</li>
                                <li>Contact Us</li>
                            </ul>
                        </div>
                    </div>

                </div>
            </section>
        );
    }
}

export default Header;

Header.scss:

@import '../App.scss';

.main {
    background-color: white;
    padding: 5px 20px;
    flex-wrap: wrap;
}

.logo-name {
    width: 500px;
    height: 110px;

    @media(max-width: 500px) {
        justify-content: center;
    }
}

.logo-text {
    width: 350px;

    @media(max-width: 500px) {
        width: 200px;
    }
}

.logo-img {
    width: 100px;

    @media(max-width: 500px) {
        width: 50px;
    }
}

.spacer {
    width: 30px;

    @media(max-width: 500px) {
        width: 15px;
    }
}

.contact-search-menu {
    width: 800px;
    height: 110px;
}

.contact-methods {
    flex-wrap: wrap;
}

ul {
    list-style-type: none;
    padding-left: 0;
    font-weight: bold;
    margin-bottom: 0;
    font-size: 12pt;
    @extend .flex-row-space-between;

    background-color: yellow;

    @media(max-width: 660px) {
        margin-top: 10px;
        font-size: 10pt;
    }

    @media(max-width: 500px) {
        flex-direction: column;
    }

    li {
        color: black;
        transition: color .2s linear;

        &:hover {
            color: #00c8ea;
            cursor: pointer;
        }
    }
}

ContactMethod.js:

import React, { Component } from 'react';
import '../../App.scss';
import './ContactMethod.scss';
// eslint-disable-next-line
import callUsIcon from '../../assets/images/call-us-icon.png';

class ContactMethod extends Component {

    render() {
        // Figure out which contact method this is:
        let methodTypeName = '';
        let methodTypeValue = '';
        //let iconBasePath = '../../assets/images/'; // <-- Why can't I use this?
        let icon = '';
        switch (this.props.methodType) {
            case 'phone':
                methodTypeName = 'Call Us';
                methodTypeValue = '403-999-4951';
                icon = require('../../assets/images/call-us-icon.png');
                break;
            case 'email':
                methodTypeName = 'Email Us';
                methodTypeValue = 'support@assertivesolutions.ca';
                icon = require('../../assets/images/email-us-icon.png');
                break;
            case 'search':
                methodTypeName = 'Search';
                methodTypeValue = 'Enter search here...';
                icon = require('../../assets/images/search-icon.png');
                break;
            // need default case
        }

        // If this is search, we want an input field:
        var valueElement = <span className="contact-method-value">{ methodTypeValue }</span>;
        if (this.props.methodType === 'search') {
            valueElement = <input className="contact-method-value" placeholder={ methodTypeValue } type="text" />
        }

        // Return the component:
        return (
            <div className="contact-method flex-row-space-between">
                <div className="flex-column-center">
                    <img src={ icon } alt="{ icon }" />
                </div>
                <div className="name-and-value flex-column-space-around">
                    <span className="contact-method-name">{ methodTypeName }</span>
                    { valueElement } {/* why does phone number show up as a link in Edge? */}
                </div>
            </div>
        );
    }
}

export default ContactMethod;

ContactMethod.scss:

.contact-method {
    margin-top: 0px;

    @media(max-width: 1340px) {
        margin-top: 10px;
    }
}

.contact-method-name {
    font-weight: bold;
    font-family: arial;
    font-size: 10pt;
    color: #182f89;
}

.contact-method-value {
    font-weight: normal;
    font-family: arial;
    font-size: 10pt;
    color: black;
}

.name-and-value {
    margin-left: 10px;
}