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>

    #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;


    #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;


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

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

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

<body id="thebody">
    <div id="themainbody">
            <h1 id="title"> Free Code Camp Survey</h1>
            <P id="description" > This is just placeholder text for the description of survey<P>
    <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 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 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 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 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>

                    <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 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 id="divfortextarea">
                        <label for="comments">Comments:</label><br>
                        <textarea id="comments" name="comments" placeholder="Your comments..."></textarea>

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



<script src=""></script>


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!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.