Grid within Grid problems

I have created a grid within grid using the grid-area property to assign content to a particular grid. My #main has grid-template-areas of “header”, “content”, and "footer. The grid within the grid, #survey-form has three grid-template-areas as well. “srvyheader”, “srvycontent” and “srvyfooter”. Inside of that grid, I try to assign content to srvycontent but no matter what I do, it does not seem to recognize that grid-area. I know this is something simple but right now it eludes me. Any help would be appreciated.

<!DOCTYPE html>
<html>

<style>
    #thebody {
        background-color: grey;
    }
    #title {
        text-align: center;
    }

    #main {
        background-color: lightsalmon;
        display: grid;
        width: 100%;
        grid-template-rows: 1fr auto 1fr;
        grid-row-gap: 20px;
        grid-template-areas:
            "header"
            "content"
            "footer";

    }

    #headerofthebody {
        grid-area: header;
        width: 50%;
        background-color: blue;
    }

    #survey-form {
        background-color: darkcyan;
        display: grid;
        width: 100%;
        grid-template-rows: 200px 600px 200px;
        grid-column-gap: 10px;
        grid-area: content;
        grid-template-areas:
            "srvyheader"
            "srvycontent"
            "srvyfooter";

    }

    #theform {
        background-color: azure;
        width: 100%;
        display: grid;
        grid-area: srvycontent;
    }

    #footerofpage {
        background-color: greenyellow;
        grid-area: footer;
    }


</style>
<head>
    <h1>The free Code Survey Project</h1>



</head>
<body id="thebody">
    <div id="themainbody">
        <div>
            <h1 id="title"> Free Code Camp Survey</h1>
            <P id="description" > This is just placeholder text for the description of survey<P>
        </div>
    </div>
    <div id="bodyofform">
        <div id="main">
            <div id="headerofthebody" >
                <h3> Travel Survey</h3>
                <div id="surveyinstructions">
                    <p> This is the instructions for the survey</p>
                </div>
            </div>
            <div id="survey-form">
                <form action="/action_page.php" method="get" id="theform">
                    <div id="divforname" >
                        <label for="name" id="name-label">Enter Your Name:</label><br>
                        <input type="text" id="name" required placeholder="Name" name="name"><br>
                    </div>

                    <div id="divforemail" >
                        <label for="email" id="email-label">Enter Your Email:</label><br>
                        <input type="email" id="email" required placeholder="Email" name="email"><br>
                    </div>

                    <div id="divfornumber">
                        <label for="number" id="number-label">Enter Your Age (between 18 and 110):</label><br>
                        <input type="number" id="number" name="number" placeholder="Age" min="18" max="110"> <br>
                    </div>

                    <div id="divfordropdown">
                        <label for="dropdown" id="dropdown-label">Areas Of The World You Have Visited:</label><br>
                        <select id="dropdown" name="country">
                            <option value="anartica">Antartica</option>
                            <option value="artic">Artic</option>
                            <option value="asia">Asia</option>
                            <option value="carribbean">Carribbean</option>
                            <option value="centralamerica">Central America</option>
                            <option value="easterneurope">Eastern Europe</option>
                            <option value="euqatorialafrica">Equatorial Africa</option>
                            <option value="middleeast">Middle East</option>
                            <option value="northamerica">North America</option>
                            <option value="northernafrica">Northern Africa</option>
                            <option value="pacificislands">Argentina</option>
                            <option value="southamerica">South America</option>
                            <option value="southernafrica">Argentina</option>
                            <option value="westerneurope">Western Europe</option>
                        </select><br>
                    </div>

                    <div id="divforcheckbox">
                        <p>Choose your favorite method of travel:</p>
                        <input type="checkbox" id="air" name="fav_mode_of_travel" value="Air Travel"
                        <label for="air">Air</label><br>

                        <input type="checkbox" id="train" name="fav_mode_of_travel" value="Train"
                        <label for="train">Train</label><br>

                        <input type="checkbox" id="automobile" name="fav_mode_of_travel" value="Automobile"
                        <label for="automobile">Automobile</label><br>

                        <input type="checkbox" id="cruise" name="fav_mode_of_travel" value="Cruise Ship"
                        <label for="cruise">Cruise Ship</label><br>

                        <input type="checkbox" id="safari" name="fav_mode_of_travel" value="Safari"
                        <label for="safari">Safari</label><br>

                        <input type="checkbox" id="wilderness" name="fav_mode_of_travel" value="Wilderness"
                        <label for="wilderness">Wilderness</label><br>

                        <input type="checkbox" id="spacetourism" name="fav_mode_of_travel" value="Space Tourism"
                        <label for="spacetourism">Space Tourism</label><br>

                        <input type="checkbox" id="adventure" name="fav_mode_of_travel" value="Adventure"
                        <label for="adventure">Adventure</label><br>
                    </div>

                    <div id="divforradio">
                        <p>Number of people with whom you typically travel (including yourself):</p>
                        <input type="radio" id="single" name="fav_mode_of_travel" value="One"
                        <label for="single">Just Myself</label><br>

                        <input type="radio" id="duo" name="fav_mode_of_travel" value="Two"
                        <label for="duo">Me and a Friend</label><br>

                        <input type="radio" id="Three_to_Four" name="fav_mode_of_travel" value="Three to Four"
                        <label for="Three_to_Four">Three to Four</label><br>

                        <input type="radio" id="Up_to_Ten" name="fav_mode_of_travel" value="Up to Ten"
                        <label for="Up_to_Ten">Up to Ten</label><br>

                        <input type="radio" id="tour_groups" name="fav_mode_of_travel" value="Tour Groups"
                        <label for="tour_groups">Tour Groups</label><br>

                    </div>
                    <div id="divfortextarea">
                        <label for="comments">Comments:</label><br>
                        <textarea id="comments" name="comments" placeholder="Your comments..."></textarea>
                    </div>

                    <div id="submitbutton">
                        <input type="submit" id="submit" value="Submit">
                    </div>
                </form>
            </div>
            <div id="footerofpage">
                <p>This is where the footer text will be</p>
            </div>




        </div>


    </div>





</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

Challenge: Build a Survey Form

Link to the challenge:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank You very much for the help. My first post!