html - 页脚代码在CSS样式表中显示为红色，但是HTML代码很好

Question

错误没有更早出现...昨晚我尝试保存文件时才注意到它。有什么问题吗？因为我看过HTML代码，似乎什么都没有。

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><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </div>
    <div class="span-3-of-3">
      <ul class="social-links">
        <li><a href="#"><i class="ion-social-linkedin"></i></a></li>
        <li><a href="#"><i class="ion-social-instagram"></i></a></li>
        <li><a href="#"><i class="ion-social-twitter"></i></a></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 &copy; 2020, Euphoric. All rights reserved.</p>
  </div>
</footer>

错误没有更早出现...昨晚我尝试保存文件时才注意到它。有什么问题吗？因为我看过HTML代码，似乎什么都没有。

Answer 1

如果在任何文本/代码编辑器中打开代码，则可以看到其中存在很多错误，例如:

.pos-info: before {

:和之前之间不应有空格

padding: 0 auto;

chrome将此标记为无效

.img_description:hover {
    transform
    
}

没有值(value)的属性(property)

.pos-content: after {

再次，:和之后之间不应有空格
编辑:发现更多错误:
921行

.cloud-content {

没有结束标记，它会使后面的所有内容中断。这可能是您大多数问题的原因。