I can't seem to get all credit for the landing page project

I can’t seem to get the last three credits. Am I’m not sure why. To my inexperienced eyes, I feel like I did it correctly. Possibly because I am using bootstrap?
Thx

<!DOCTYPE html>
<html lang="en">

<head>
<style>
body{
    background-color:ghostwhite;
    background-image: url("UmbrellaGirl..jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

  .container{
      text-align: center;
  }  
}
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-gap: 20px;
    border-block: 1px solid black;
}
h1{
    color: royalblue;
    font-size: 4em;
}


.top{
    margin-top: 1em;
    margin-bottom: 1em;;
}
.Top-par{
    
    font-weight: 400;
    font-size: 1.3em;
    font-kerning: auto;
    font-style: italic ;
    line-height: 3em;
    color:rgb(19, 19, 19);
}
.i-frame{
    display: flex;
    justify-content: center;
    padding: 3em;
}
.bottom{
    margin-top: 3em;
}
body { padding-top: 70px; }
#email{
    width: 20em;
    margin-bottom: 1em;
}
</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="Landing.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Jomolhari&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <title>Landing Page</title>
</head>

<body>
    <header id="header">
        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top justify-content-around" id="nav-bar">
            <a class="navbar-brand" href="#"></a><img id="header-img" src="mapsDot1.jpg" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-around" id="navbarNav">
                <ul class="navbar-nav justify-content-around ">
                    <li class="nav-item active">
                        <a class="nav-link" href="#card-1">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#card-2">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#card-3">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#card-3" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
            </div>
        </nav>

    </header>
    <form action="" class="container" id="form">
        <div class="top">
            <h1>From Place to Space</h1>
            <h4>“Travel makes one modest. You see what a tiny place you occupy in the world.” <br> – Gustave Flaubert
                </h3>

                <div class="i-frame">
                    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/jkEmvP6ih48" frameborder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>

                </div>
                <div>
                    <p class="Top-par">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti fuga, sequi
                        iusto modi, cum commodi delectus placeat cupiditate excepturi at molestias aspernatur error.
                        Aspernatur, quidem? Lorem ipsum dolor sit amet consectetur adipisicing elit. At alias laborum
                        quisquam temporibus assumenda, itaque cumque officiis dolorum, nulla velit tenetur eaque dicta,
                        perspiciatis necessitatibus perferendis rerum rem quia quis.</p>

                </div>

        </div>
        <div class="cards row " style="justify-content: space-around; margin-top: 5em;">

            <div class="card " id="card-1" style="width: 18rem; margin-top: 4em; float:none; grid-row: ;">
                <img src="ad-5.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                </div>
            </div>
            <div class="card" id="card-2" style="width: 18rem; margin-top: 4em; float:none;">
                <img src="ad-4.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                </div>
            </div>
            <div class="card" id="card-3" style="width: 18rem; margin-top: 4em; float:none;">
                <img src="ad-3.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's content.</p>
                </div>
            </div>

        </div>
        <div class="bottom">
            <div class="Top-par">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum molestias qui adipisci voluptates ipsum obcaecati unde quis, earum libero ipsam voluptate architecto recusandae nam sit?</p>
            </div>
            <input name="email" id="email" type="email" placeholder="Please Enter Your Email" required>
         <div class="submit-form">
            <a href="https://www.freecodecamp.com/email-submit) "><button id="submit" type="button" class="btn btn-primary">Submit</button></a>
        </div >
        </div>
        </Div>
    </form>
</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>

When I test your code, it passes all but Test #11 ( Within the form, there is a submit with corresponding id=“submit”).

That’s interesting, It shows my 13/16 completed. I’ll try derectly into codepen. MAy that will change it.

Is this not correctly formatted for #16?
<a href="https://www.freecodecamp.com/email-submit) "><button id="submit" type="submit" class="btn btn-primary">Submit</button></a>

Thank you.

Nevermind, I just changed “button” to “input” and it all passed inside of CodePen. Is this a normal thing that a project will only pass inside of the site? I was using VScode bc I like the layout better.

The projects must be live websites to obtain the certification.