css wont validate keep getting Parse Error @media handheld, only screen and (max-width: 320px) error

Question

Cant figure out what whats wrong all my other mobile device media queries validate just my last one wont i couldn't seem to find the answer to this anywhere. I've been stuck on this for a while.Not sure on how to fix it, This is my first time using media queries, and im using the 1140 grid and html5 any idea how to get it to validate.

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background:url(../images/background.jpg);
    margin-left:auto;
    margin-right:auto;
    }

    p {
        font-family:Arial, Helvetica, sans-serif;
        font-size:18px;
    }


    h2 {

        font-family:Arial, Helvetica, sans-serif;
        font-size:24px;
        font-weight:bold;
        color:#000;
    }

    h4 {
        font-size:18px;
    }

    h3 {
        font-size:16px;
    }

    .hidden {
        display: none;
    }


        header nav {
        float:right;
        width:670px;
        height:70px;
        margin-top: 47px;
        font-family: Arial, Helvetica, sans-serif;
        background-image: url(../images/nav_bar.png);
        background-repeat:no-repeat;
    }

    nav ul li {
        float: left;
        cursor: pointer;
        list-style-type: none;
        padding-top:20px;
        padding-left:40px;
        text-align: left;
    }

    nav ul {

        font:Arial, Helvetica, sans-serif;
        font-size:24px;
        color:#FFF;
    }

nav ul li a {
    color: #FFF;
    text-decoration: none;
    }

    .logo {
        margin-top:87px;
    }

    .lineone {
        background:#000;
        height:5px;
        width:891px;
        float:right;
        margin-top:30px;
    }

    /*----Home----*/

    .photos {
        width:1140px;
        margin-left:55px;;
        margin-top:40px;
    }

    .about {
        margin-top:50px;
        margin-left:35px;
    }

    .linetwo {
        background:#000;
        height:5px;
        width:1102px;
        margin-left:35px;
        margin-top:10px;
    }


    .contenthome {
        margin-left:56px;
        margin-top:20px;
    }


/*----info-----*/

.lineinfo{
        background:#000;
        height:3px;
        width:625px;
}

#mainContent {
    margin-top:45px;    
}

#mainContent h2 {
    margin-top:50px;

}

#mainContent p {
    font-family:Arial, Helvetica, sans-serif;
    font-weight:lighter;
    font-size:18px; 
}

#mainImage{
    margin-top:40px;
    margin-left:20px;

}

.footer {
    background-image:url(../images/footer.png);
    background-repeat:no-repeat;
    float:left;
    padding-bottom:200px;
    height:100px;
    width:1129px;
    margin-top:182px;
}
.footer h3 {
    margin-left: auto;
    margin-right:auto;
    text-align:center;
    padding-top:43px;
}







/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */


@media handheld, only screen and (max-width: 990px) {
    .lineinfo {
        width:90%;
    }
}

@media handheld, only screen and (max-width: 900px) {
    .logo{
        margin-top:130px;

    }

    .lineinfo {
        width:90%;
    }

}



@media handheld, only screen and (max-width: 767px) {

    .logo {
        margin-top:20px;
        width:90%;
        height:90%;
        margin-left:auto;
        margin-right:auto;
    }



    header nav {
        float:none;
        margin: 20px;
        margin-right:auto;
        margin-left:auto;
        margin-bottom:0px;
        width:300px;


}

    header nav ul li {
        margin:auto;
        height:10px;
        padding-right:20px;
        font-size:16px; 
        }


    .photos {
        width:75%;

}

#mainImage {
margin-right:auto;
margin-left:auto;

}
.lineinfo {
        width:90%;
    }

.footer {
    width:90%;

    background-image:url(../images/footer_media.png);

}
.footer h3{
    font-size:.875em;
}

@media handheld, only screen and (max-width: 320px) {


    .logo {
        margin-top:20px;
        margin-left:auto;
        margin-right:auto;
        width:90%;
        }

    header nav {
        float:none;
        margin: 20px;
        margin-right:auto;
        margin-left:auto;
        margin-bottom:0px;
    }


    header nav ul li {
        width:20px;
        font-size:12px;
    }

        .lineinfo {
        width:90%;
    }

    #mainImage {
margin-right:auto;
margin-left:auto;   
}

.footer h3 {
    font-size:.875em;
}
}

Answer 1

You missed the ending bracket } after the section:

 @media handheld, only screen and (max-width: 767px) {

Just att the bracket:

   .footer h3{ 
       font-size:.875em;
    }
 } /* here. */

    @media handheld, only screen and (max-width: 320px) {