구글과 사파리의 결과값에 차이가 있습니다. 조언 부탁드려도 될까요?

html{
font-size: 16px;
}

body{
font-family: 'Chivo', sans-serif;
margin-left: 50px;
margin-right: 50px;
margin-top: 0;
margin-bottom: 50px;
padding: 0;
font-size: 16px;
}





.container_wrapper{
width:auto;
align-content: center;
}

.header_Pack{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  border-width:  thin;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-style: solid;
  border-color: #D8D8D8;

  height: 20px;
  padding: 1rem;
  padding-bottom: 32px;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

#nav .nav_list{
  margin: 0;
  padding: 0;
  padding-top: 40px;
  padding-left: 15%;
  word-spacing: 16px;
  width: 740px;

}

#nav .nav_list span{
  text-align: center;
}


#nav .nav_list a{
  text-decoration: none;
  color: #696969;
  font-size: 1.3rem;
  font-weight: bold;
  float:left;
  width: 12%;
}

#nav .nav_list a:hover  {
  color: #333333;
}



.title_description{
display: inline;
color:gray;

}

#title_description{
  margin: 25px 0 0 0;
  padding: 0;
  padding-left: 2px;
  font-size: 0.01rem;

}


.title{
  margin:0;
  padding: 0;


}

.title a{
  text-decoration: none;
  color: #333333;
  float: left;
  width: 130px;
}

h2 {
  margin: 0;
  padding: 0;
}

p {
  margin: 25%;
}

.slogan{
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.5rem;
  color: #2E2E2E;
}

.slogan a{
  text-decoration: none;
  color: #2E2E2E;
}



hr {
position: relative;
border: none;
height: 0.6px;
background: #2E2E2E;
border-color: #2E2E2E;
margin: 0;

}

#worship_title_ONE {
text-align: center;
}

#worship_title_ONE a {
  font-weight: bold;
  color: #0e4d88;
  text-decoration: none;
  font-size: 1.7rem;
}

/*<시작> 인터넷에서 따온 코드 <시작>*/
.outer {

  width: 650px;
  margin: auto;
  display: block;
  /* set the font color here as a background color, in this case black
  background-color: black; */

}

.bg {
  text-align: center;
  width: 0%;
  transition: all 0.4s ease-out;
  background: #3ebac6 background: -moz-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3ebac6), color-stop(50%, #8b539e), color-stop(100%, #e53782));
  background: -webkit-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -o-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -ms-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: linear-gradient(to right, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3ebac6', endColorstr='#e53782', GradientType=1);
}

.inner {
  display: inline-block;
  background-color: white;
  mix-blend-mode: screen;
  padding: 15px;
  width: 640px;
}

h1 {
  color: black;
  letter-spacing: 5px;
}

.outer:hover .bg {
  width: 100%;
}


/*<끝> 인터넷에서 따온 코드 <끝> */



#worship_title_ONE > .outer > .bg > .inner > h2 > a {
font-size: 2.5rem;
}

#worship_time {
text-align: center;
margin-bottom: 20px;
}

.worship_program a{
text-decoration: none;
color: #201F1F;

}

.first_worship{
border-style: solid;
display: inline-block;
background-color: #0e4d88;
border-color: #0e4d88;
border-radius: 14px;
border-width: 10px;
margin:8px;
}

.second_worship{
border-style: solid;
display: inline-block;
background-color: #0e4d88;
border-color: #0e4d88;
border-radius: 14px;
border-width: 10px;
margin:8px;
}

.third_worship{
border-style: solid;
display: inline-block;
background-color: #0e4d88;
border-color: #0e4d88;
border-radius: 14px;
border-width: 10px;
margin:8px;
}

.time {
  font-size: 0.6rem;
  color: white;
  display: inline;
  vertical-align: bottom;
}

.worship_name{
  font-size: 0.9rem;
  color: white;
}

.youtube_intro{
  text-align: center;
  line-height: 20px;
  font-size: 1.5rem;
  color: #2E2E2E;
  width:100%;
}

.youtube_description{

}


.Youtube_AlphaOmega{
  font-weight: bold;
  border-style:  solid;
  border-radius: 5px;
  border-color: green;
  display: inline;
  border-width: 3px;
  padding: 2px;
}

.You{
color : #1D1D1D;
display: inline;
font-weight: 900;
font-size: 1.7rem;

}

.tube{
  border-style: solid;
  border-radius: 5px;
  border-color: red;
  border-width: 3px;
  display: inline;
  padding: 1px;
  color : white;
  background-color: red;
  font-weight: bold;

}



.logos{
font-family: inherit;
text-align: center;
font-size: 1rem;
color: #2E2E2E;
line-height: 16px;
}

.logos_chapter{
  margin: 0;
  margin-top: 16px;
  padding: 0;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  color: #2E2E2E;
}

.book_intro {
text-align: center;
font-size: 1.7rem;
}

.book_intro a {
color: #3c899c;
text-decoration: none;
}

.youtube_description a{
  color: #2E2E2E;
  text-decoration: none;
}

.support_mission {
text-align: center;
font-size: 1.7rem;
}

.support_mission a{
text-decoration: none;
color: #2E2E2E;
}

안녕하세요. 처음 적는 글인데, 도움 글이네요. (왜 css 코드가 제일 위로 간 건지... 마지막에 추가했는데) 

전공도 아니고, 코딩은 전혀 모르던 상황에서 생활코딩보고 따라하다 여기까지 온지 30일 됐습니다.

병원 입원중이라 간간히 하고 있는데, 같은 코드가 크롬과 사파리에서 다르게 동작합니다. 

크롬은 제가 기대했던 결과 그대로 보여주고 있는데, 사파리는 그렇지 않네요.

아래는 크롬의 결과입니다.

문자가 있고, 그 위 마우스를 올려 놓으면 아래처럼 색이 입혀지는 코드를 억지로 끼워맞췄습니다. (인터넷에서 긁어와서요..)

아래는 사파리의 결과입니다. 

애초에 글자가 보이지 않습니다만, 글자가 있어 보이는 곳을 더듬 듯 근처에 마우스를 올려놓으면 

위 사진처럼 글자에 색이 입혀지긴 합니다. 

문제는 크롬에서처럼 처음 텍스트가 보이지 않는다는 문제가 있네요. 

제일 위는 CSS 코드이고, 제일 아래는 HTML 코드입니다. 

보시기 불편하실텐데.. 삭제나 수정하는 방법을 모르겠네요

문제가 z-index 같은 우선순위의 개념일까 싶은데, 

잘 모르겠어서 도움 부탁드립니다. 

호스팅 알아보다 들어온 신입회원입니다. 

잘 부탁드려요.^^

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <link href="https://fonts.googleapis.com/css2?family=Chivo&display=swap" rel="stylesheet">
  <title></title>
</head>

<body>


  <p>
    <div class="support_mission">
      <div class="outer">
        <div class="bg">
          <div class="inner">
            <h2>
              <a href="index.html?id=mission">
                섬기는 교역지
            </h2>
          </div>
        </div>
      </div>
    </div>

    </p>
</body>

</html>