Help Making Nav Bar and Header Responsive

ON my blog i have a responsive theme in place, but my Secondary nav bar and my Header Image don’t scale very well for mobile devices.

http://bit.ly/KLqOAa

Here’s the CSS i’m using: Thanks for your help

/** reposition header above main wrap css


*/

#header {margin-bottom: -19px;

}

#nav {

line-height: 123%;

height: 31px;

position:relative;

left:16%;

max-width: 445px;

width: 100%;

-webkit-border-radius: 0px 0px 25px 7px;

border-radius: 0px 0px 37px 7px;

font-family: Helvetica, sans-serif;

font-size: 14px;

}

.landing #nav {

max-width: 480px;

}

.landing div#wrap div#header div.wrap div#title-area p#title a {

overflow: visible;

}