Responsive design behaviour - css

Question

This is my first responsive site. I am happy with it however there is one very annoying aspect that has completely stumped me. The original site is www.elitemarquees.com.au I have changed the home page to:
http://elitemarquees.com.au/test/index.html
The issue is; when I make the browser smaller everything moves and behaves as I intended it except for the menu (#headNav) at one point. It jumps down into the main content (#content) and sits below the second line of body text. Then when you go smaller it rectifies its self and jumps back in between the logo (#headLogo) and the main body text. Here is how I have initially set up the div sections:
//this section contains two divs headLogo and headNav
#header {
height: 180px;
}
#headLogo {
width: 250px;
float: left;
}
#headNav {
width: 600px;
float: right;
margin-top: 70px;
padding-right: 40px
}
#content {
width: 500px;
float: right;
padding-right: 140px
}
The I do this which is where I believe the bad behaviour occurs:
/* for 700px or less */
#media screen and (max-width: 700px) {
#headNav {
width: auto;
float: none;
}
#headLogo {
width: auto;
float: none;
}
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
It rectifies its self when this is fired:
/* for 480px or less */
#media screen and (max-width: 480px) {
#header {
height: auto;
}
#headNav {
padding-right: 0px;
margin-top: 0px;
}
h1 {
font-size: 24px;
}
#content {
padding-right: 10px
}
}
Thank you for any help

Answer 1

Here
/* for 700px or less */
#media screen and (max-width: 700px) {
#headNav {
width: auto;
float: none;
}
#headLogo {
width: auto;
float: none;
}
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
You should add this :
#header{
height: auto;
}