When I resize my window in Firefox the nav bar disappear until it reaches a really small window size and then it drops down. The content also doe not resize with the page until the window reaches almost mobile size.


Here is my CSS:

#head{

background-color: rgb(188,213,190);
width:100%;
height:164px;
margin-top:-20px;
border-style:solid;
border-width:2px;
border-color:rgb(119,154,135);


}

#head img{
border:none;
border: 1 px solid #CCCCCC;

}


#container{
position:relative;
height:100%;
width:960px;
margin: 0 auto;


}

body{

font-family:helvetica;
color:#383838;
min-width:1200px;
height:100%;

}

#sOne{
text-align:center;
display:block;

}

.line{
line-height:10px;
}

#sTwo{
text-align:center;
width:70%;
margin: 0 auto;

}

#sThree{
text-align:center;
width:70%;
margin: 0 auto;
}

#sFour{
float:left;
margin-bottom:5%;

}

#sFour p{
float:right;
text-align:left;
width:68%;
line-height:1.5em;

}

#sFive{
text-align:center;
margin:0 auto;
width:100%

}

#sFive img{
width:30%;
}

#sFive p{
text-align:left;
margin-left:40px;
width:93%;
margin-bottom:5%;
}

#sSix{
text-align:center;
width:65%;
margin: 0 auto;
margin-top:5%;
margin-bottom:5%;

}

#sSeven{
text-align:center;
width:65%;
margin: 0 auto;
margin-bottom:5%;

}

#sEight{

text-align:center;
width:65%;
margin: 0 auto;
line-height:1.5em;

}

#sNine{
text-align:center;
width:65%;
margin: 0 auto;
line-height:1.5em;

}
nav{
display: block;
width: 100%;
white-space: nowrap;

}

nav ul{
position:absolute;
top:45px;
left:400px;
list-style:none;
white-space: nowrap;

}

nav li{
float:left;
padding: 2em;
white-space: nowrap;

}

nav a{
color: rgb(255,255,255);
font-family:arial, helvetica, sans-serif;
font-size:20px;
text-decoration:none;
white-space: nowrap;


}

nav a:hover{
color:rgb(119,154,135);
}

@media only screen and (max-width:720px){



nav li{
padding:1%;
}

#head{
width:100%;
height:20%;
margin-bottom:15%;
}
#container {
margin-top:15%;
width:100%;
}

}