Landing Page HREF

Hey guys me again. Been a bit lol. Learned lots, FCC is great.

So last two errors I have for acceptance on this project is to do with href.
I have changed the href in many places on the nav link and im just confused now lol.
ive had index.html tutorials.html about.html and project.html as well as whats there now. Maybe the wordings getting me but anyhow, heres my code

Don’t mind all the forms. They are currently hidden via css. Im using it as a reference guide to go back to

Errors I have left

Each .nav-link element should have an href attribute.
Failed:Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element's id. e.g. #footer).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Landing Page - Home</title>
    <link rel="stylesheet" href="styles.css">
    
</head>
<body id="body">
    <!-- Header section -->
    <header id="header">
        <h1>Landing Page</h1>
        <img id="header-img" src="logo.png" alt="Logo">
        <!-- Navigation bar -->
        <nav id="nav-bar" class="nav-bar">
            <ul>
                <li class="nav-link"><a href="body">Home</a></li>
                <li class="nav-link"><a href="title">Tutorials</a></li>
                <li class="nav-link"><a href="header">Projects</a></li>
                <li class="nav-link"><a href="footer">About</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Form starts here -->
        <form action="https://www.freecodecamp.com/email-submit" method="post" id="form">
            <fieldset>
                <legend class="legend"><!--Personal Information--></legend>
                <div class="hidden">
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name">
                </div>
                <div class="form-group">
                    <label for="email"><!--Email:--></label>
                    <input type="email" id="email" name="email" required placeholder="Enter your Email">
                </div>
                <div class="hidden">
                    <label for="pwd">Password:</label>
                    <input type="password" id="pwd" name="password" required>
                </div>
                <div class="hidden">
                    <label>Gender:</label>
                    <label><input type="radio" name="gender" value="male"> Male</label>
                    <label><input type="radio" name="gender" value="female"> Female</label>
                </div>
                <div class="hidden">
                    <label>Interests:</label>
                    <label><input type="checkbox" name="interest" value="sports"> Sports</label>
                    <label><input type="checkbox" name="interest" value="music"> Music</label>
                </div>
                <div class="hidden">
                    <label for="country">Country:</label>
                    <select id="country" name="country">
                        <option value="usa">USA</option>
                        <option value="canada">Canada</option>
                        <option value="uk">UK</option>
                    </select>
                </div>
                <div class="hidden">
                    <label for="comments">Comments:</label>
                    <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
                </div>
            </fieldset>
            <input type="submit" class="submit-button" id="submit">
        </form>
    </main>
    
    <!-- Footer section -->
    <footer class="footer" id="footer">This was also one of the projects created :)</footer>

    <!-- Video element -->
    <video id="video" src="video.mp4" href="video"></video>
</body>
</html>

Sorry, I found the problem

Solution posted below with the differences unchanged in the original post.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Landing Page - Home</title>
    <link rel="stylesheet" href="styles.css">
    
</head>
<body id="body">
    <!-- Header section -->
    <header id="header">
        <h1>Landing Page</h1>
        <img id="header-img" src="logo.png" alt="Logo">
        <!-- Navigation bar -->
        <nav id="nav-bar" class="nav-bar" href="index.html">
            <ul>
                <link href="#body" li class="nav-link"><a href="body">Home</a></li>
                <link href="#title" li class="nav-link"><a href="title">Tutorials</a></li>
                <link href="#header" li class="nav-link"><a href="header">Projects</a></li>
                <link href="#footer" li class="nav-link"><a href="footer">About</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Form starts here -->
        <form action="https://www.freecodecamp.com/email-submit" method="post" id="form">
            <fieldset>
                <legend class="legend"><!--Personal Information--></legend>
                <div class="hidden">
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name">
                </div>
                <div class="form-group">
                    <label for="email"><!--Email:--></label>
                    <input type="email" id="email" name="email" required placeholder="Enter your Email">
                </div>
                <div class="hidden">
                    <label for="pwd">Password:</label>
                    <input type="password" id="pwd" name="password" required>
                </div>
                <div class="hidden">
                    <label>Gender:</label>
                    <label><input type="radio" name="gender" value="male"> Male</label>
                    <label><input type="radio" name="gender" value="female"> Female</label>
                </div>
                <div class="hidden">
                    <label>Interests:</label>
                    <label><input type="checkbox" name="interest" value="sports"> Sports</label>
                    <label><input type="checkbox" name="interest" value="music"> Music</label>
                </div>
                <div class="hidden">
                    <label for="country">Country:</label>
                    <select id="country" name="country">
                        <option value="usa">USA</option>
                        <option value="canada">Canada</option>
                        <option value="uk">UK</option>
                    </select>
                </div>
                <div class="hidden">
                    <label for="comments">Comments:</label>
                    <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
                </div>
            </fieldset>
            <input type="submit" class="submit-button" id="submit">
        </form>
    </main>
    
    <!-- Footer section -->
    <footer class="footer" id="footer">This was also one of the projects created :)</footer>

    <!-- Video element -->
    <video id="video" src="video.mp4" href="video"></video>
</body>
</html>

what kind of element does have an hrefattribute?

I don’t think it’s necessarily what I was doing and maybe what the “tests” wanted.
Cause I’ve done a variation of what it did accept almost 2 hours ago lol

worst way to solve it… it’s invalid html
put the class on the a element, make these li again