CSS Parse Error Causing Browser Responsiveness Issues - html

Question

I'm unable to find the parse error in my css. The mobile website looks responsive in firefox but not Chrome. I am assuming that the parse error is affecting the scaling.
I've been trying to find the error with W3 CSS Validator. Not giving me enough to find the error other than stating "parse error". Might have missed RBRACE but scanned code and couldn't find one missing. Nor any typo.
#media only screen and (max-width: 600px) {
body {
font-size: 16px;
}
#nav {
height: 3.75em;
position: fixed;
top: 0;
width: 100%;
transition: 1s;
border-radius: 0em;
}
#nav .scrolled {
background-color: transparent;
}
#logo {
position: relative;
margin-top: 0.15em;
margin-left: 0.0625em;
height: 1.5em;
}
.m-hidden {
visibility: hidden;
}
.burger {
margin-top: -19.3em;
margin-left: 20.625em;
float: right;
visibility: visible;
position: absolute;
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 1.5625em;
height: 0.125em;
background-color: white;
margin: 0.375em 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 3px) ;
transform: rotate(-45deg) translate(-5px, 3px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 1; /* Sit on top */
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 1.875em; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
.overlay a {
padding: 0.5em;
text-decoration: none;
font-size: 1.875em;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
text-decoration: none;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 1.25em}
.overlay .closebtn {
font-size: 2.5em;
top: 15px;
right: 35px;
}
}
.cover {
height: 100%;
}
.cover h2 {
margin-left: -0.2em;
margin-top: 6em;
font-size: 2.5em;
text-align: left;
}
.who {
height: 80%;
}
.who h1 {
position: relative;
margin-top: 1em;
margin-left: 2em;
font-size: 3.125em;
text-shadow: 5px 0px white;
text-align: center;
}
.who h2 {
margin-left: 1.5625em;
float: left;
font-size: 0.9375em;
width: 18.75em;
text-align: center;
}
.who a {
position: absolute;
margin-top: 0em;
margin-left: 0em;
float: right;
color: lightgrey;
font-size: 0.9375em;
text-decoration: underline;
https://stackoverflow.com/help visibility: hidden;
}
.service {
height: 95%;
/* background-image: url('../img/mobile/red.jpg');*/
}
.service h1{
margin-top: -4.375em;
font-size: 2em;
}
.service h2{
width: 70%;
font-size: 0.9375em;
}
.service_2 {
margin: 0em;
display: table;
width: 100%;
height: 95%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.service_2 .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.service_2 .content {
text-align: right;
}
.service_2 img {
padding-top: 1em;
height: 6.5em;
}
.service_2 h1 {
font-family: haboro, serif;
font-weight: bold;
font-size: 2em;
text-align: right;
margin-left: -12em;
}
.service_2 h2 {
margin-right: 0em;
float: right;
text-align: right;
font-size: 0.9375em;
width: 18.75em;
}
.service_3 {
height: 95%;
margin-top: -14.7em;
}
.service_3 h1{
font-size: 2em;
}
.service_3 h2{
width: 70%;
font-size: 0.9375em;
}
.service_3 span {
font-size: 0.9375em;
}
.portfolio-title {
margin-top: 0em;
padding: 5em;
text-align: center;
}
.portfolio-title h1 {
font-size: 2.5em;
}
.portfolio-title hr {
width: 10em;
}
.portfolio-title h3 {
font-size: 0.9375em;
color: white;
}
.box-wrap {
display: table;
padding: 0em;
}
.zoom {
position: relative;
}
.box-content h1 {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.frame {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame img {
height: 16em;
width: 100%;
}
.frame p {
op: 65%;
}
.frame2 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame2 img {
height: 16em;
width: 100%;
}
.frame2 p {
top: 65%;
}
.frame3 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame3 img {
height: 16em;
width: 100%;
}
.frame4 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame4 img {
height: 16em;
width: 100%;
}
.frame4 p {
top: 65%;
}
.frame5 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame5 img {
height: 16em;
width: 100%;
}
.frame6 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame6 img {
height: 16em;
width: 100%;
}
.project-btn {
display: table;
height: 3.125em;
width: 100%;
background-color: #C7C4BF;
color: black;
text-align: center;
margin-bottom: 0em;
}
.project-btn h3 {
padding-top: 0em;
font-size: 0.9375em;
}
.project-btn a {
color: black;
}
.project-btn a:hover {
text-decoration: none;
color: grey;
}
.contact {
height: 60%;
margin-bottom: 33.3em;
}
.contact h1 {
margin: 0em;
font-size: 1.5625em;
}
.contact-btn {
margin-top: 1.25em;
height: 2.5em;
width: 9.375em;
font-size: 0.9375em;
}
.contact-btn:hover {
font-size: 9.375em;
}
footer {
height: 80%;
}
.footercontent {
margin-left: -12em;
}
footer img {
height: 3.125em;
margin-bottom: 0.9375em;
}
footer p:nth-child(4) {
font-size: 0.75em;
}
footer .foot {
font-family: haboro, serif;
font-size: 1em;
padding-bottom: 0.0625em;
}
footer .break {
margin-left: 2em;
margin-top: -0.3125em;
border-bottom: 1px solid white;
border-width: 1px;
width: 4.375em;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
text-decoration: none;
color: grey;
}
footer i {
font-size: 1.25em;
margin-bottom: 0.625em;
}
.footer-icons {
font-size: 0.625em;
margin-right: 1em;
}
.fmobile {
margin-left: 0.3125em;
position: absolute;
visibility: visible;
align-items: center;
}
}

Answer 1

There is a text https://stackoverflow.com/help in your .who a. Remove this line.
.who a {
position: absolute;
margin-top: 0em;
margin-left: 0em;
float: right;
color: lightgrey;
font-size: 0.9375em;
text-decoration: underline;
visibility: hidden;
}
The property op does not exist. Do uou mean top or opacity ??
.frame p {
op: 65%;
}