Hi I am looking for help with my code! The code I have written passes every other test under this project except for number 9 that “Each .nav-link element should have an href attribute.”. To me, it looks like each of these .nav-link elements does have an href attribute but it still does not pass the test. Does anyone know where the mistake is or how to fix this? I am very frustrated and have been stuck on this for a few days. Thanks.
<!DOCTYPE html>
<html lang="en">
<header id="header">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Product Landing Page</title>
<img id="header-img" src="https://i.sstatic.net/OjPd5.png">
<nav id="nav-bar">
<a class="nav-link" name="google" id="google" href="#google">
</a>
<a class="nav-link" name="facebook" id="facebook" href="#facebook"></a>
<a class="nav-link" name="twitter" id="twitter" href="#twitter"></a>
</nav>
<button></button>
</header>
<body>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/FQdaUv95mR8?si=q1FLx8eHn80IX1Dr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<div class="form">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" name="email" placeholder="Email"></input>
<input type="submit" id="submit"></input>
</form>
</div>
<h1 class="nav-link" name="google" href="#google">Features</h1>
<h1 name="facebook" href="#facebook" class="nav-link">facebook</h1>
<h1 class="nav-link" name="twitter" href="#twitter">twitter</h1>
</body>
<footer>
</footer>
</html>