Footer code displays red in CSS stylesheet, but HTML code is fine - html

Question

The errors didn't come up earlier... i just noticed it last night when i tried to save my file. what could be wrong? Cause i have had a look at the HTML code and nothing is seems off.
footer {
background-color: #023440;
padding: 30px;
margin-top: 800px;
bottom: 0px;
}
.logo-footer {
height: 70px;
width: auto;
float: left;
margin-top: 60px;
margin-left: -20px;
margin-bottom: 25px;
cursor: pointer;
}
.footer-nav {
list-style: none;
float: none;
margin-bottom: 20px;
}
.social-links {
list-style: none;
float: right;
margin-top: -40px;
padding-right: 5px;
}
.footer-nav li,
.social-links li {
display: inline-block;
margin-right: 20px;
font-size: 90%;
}
.footer-nav li:last-child,
.social-links li:last-child {
margin-right: 0;
}
.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited {
text-decoration: none;
border: 0;
color: #a3a3a3;
font-weight: 400;
transition: color 0.3s;
}
.footer-nav li a:hover,
.footer-nav li a:active {
color: #fff;
font-weight: 400;
}
.social-links li a:link,
.social-links li a:visited {
font-size: 135%;
}
.footer-address p {
color: #fff;
font-size: 90%;
display: block;
float: left;
line-height: 1.5;
margin-bottom: 30px;
}
.copyright {
color: #fff;
text-align: center;
font-size: 80%;
display: block;
margin-left: 0px;
margin-top: 25px;
}
.copyright:before {
display: block;
height: 0.1px;
background-color: #045d71;
content: " ";
width: 100%;
margin: 0 auto;
margin-bottom: 25px;
}
.ion-social-linkedin,
.ion-social-instagram,
.ion-social-twitter {
transition: color 0.3s;
}
.ion-social-linkedin:hover {
color: #007bb5;
}
.ion-social-instagram:hover {
color: #e95950;
}
.ion-social-twitter:hover {
color: #55acee;
}
.email-footer {
text-decoration: none;
color: #fff;
transition: color 0.3s, border-bottom 0.3s;
}
.email-footer:hover {
color: #a3a3a3;
border-bottom: 0.5px solid #a3a3a3;
}
<footer>
<div class="row">
<div class="span-3-of-3">
<ul class="footer-nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Projects</li>
<li>Products</li>
<li>Blog</li>
</ul>
</div>
<div class="span-3-of-3">
<ul class="social-links">
<li><i class="ion-social-linkedin"></i></li>
<li><i class="ion-social-instagram"></i></li>
<li><i class="ion-social-twitter"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="span-3-of-3">
<img src="resources/img/euphoric%20Logo%20footer-01.png" alt="euphoric-logo-footer" class="logo-footer">
</div>
</div>
<div class="row">
<ul class="footer-address">
<p>40 Alison Road.<br>
<a class="email-footer" a href="#">info#euphoric.co</a></p>
</ul>
</div>
<div class="row">
<p class="copyright"> Copyright © 2020, Euphoric. All rights reserved.</p>
</div>
</footer>
The errors didn't come up earlier... i just noticed it last night when i tried to save my file. what could be wrong? Cause i have had a look at the HTML code and nothing is seems off.

Answer 1

If you open your code in any text/code editor, you can see that there's plenty of errors in there, for example:
.pos-info: before {
there shouldn't be a space between the : and the before
padding: 0 auto;
chrome marks this as invalid
.img_description:hover {
transform
}
property without a value
.pos-content: after {
again, there shouldn't be a space between : and after
edit: more errors found:
On line 921
.cloud-content {
doesn't have a closing tag, which breaks everything after it. This is probably the cause of most of your problems.