Only some of my css shows up in chrome but in safari it works fine

here is the CSS, at the bottom, it is labeled where the code that does not work starts. Any help is appreciated. Also is you need any additional info, please let me know.

• {
  margin: 0;
  padding: 0;
  }

body {
background-color: #eee;
}

nav {
width: 100%;
height: 100px;
background-color: #fff;
}

ul {

}

ul li {
list-style: none;
display: inline-block;
line-height: 100px
}

ul li a {
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #1e1e1e; /* dark grey */
padding: 0 20px;
}

h1 {
text-align: center;
margin-top: 220px;
font-size: 75px;
}

h2 {
margin: 9px;
}

p {
margin-left: 15px;
}

#events {
text-decoration: none;
font-size: 45px;
color: #1e1e1e; /* dark grey */
}
#events:hover {
text-decoration: none;
font-size: 45px;
color: grey;
}

#backpt {
display: block;
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 5px;
margin-bottom: 0px;

}

.videobottom {
margin-top: 130px;
margin-bottom: 115px;
}

.videobottom:hover {

}

#ppolicy {
background-color: black;
position: fixed;
}

#footer {
background-color: #f3f3f3;
}

CODE THAT IS NOT WORKING STARTS HERE

.bg-modal {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;

}

.modal-content {
width: 500px;
height: 300px;
background-color: white;
border-radius: 4px;
text-align: center;
padding: 20px;
position: relative;
}

.close {
position: absolute;
top: 0;
right: 14px;
font-size: 42px;
transform: rotate(45deg);
cursor: pointer;
}

.popup1 {
font-size: 20px;
font-family: tahoma;
width: 500px;
height: 100px;
right: 0;
margin: 0 auto;
border: 1px solid #ccc;
color: black;
display: block;
padding: 10px;
box-sizing: border-box;
text-decoration: none;
background-color: white;
border-radius: 9px 6px 9px / 4px 7px;

}

#close {
float:right;
display:inline-block;
padding:2px 5px;

CODE THAT IS NOT WORKING ENDS HERE