I am trying to make a website I am developing responsive, so far the elements that I want to make responsive to change in the the browser window are working well, except for the navigation text size and position...

The HTML make up for the web page looks like this

<div id="nav">
   <ul>
      <li>
         <div class="navtext"><a href="index.php">Home</a></div>
      </li>
      <li>
         <div class="navtext"><a href="bio.php">Bio</a></div>
      </li>
      <li>
         <div class="navtext"><a href="resume.php">Resume</a></div>
      </li>
      <li>
         <div class="navtext"><a href="reel.php">Reel</a></div>
      </li>
      <li>
         <div class="navtext"><a href="recommendation.php">Recommendation</a></div>
      </li>
      <li>
         <div class="navtext"><a href="gallery.php">Gallery</a></div>
      </li>
      <li>
         <div class="navtext"><a href="contact.php">Contact</a></div>
      </li>
   </ul>
</div>

The media query I have added to the CSS looks like this

@media only screen and (max-width: 479px) {
   #nav{
      width: 905px;
      position: relative;
      float: right;
      margin-left: 500px;
   }

   #nav ul {
     list-style: none;
     padding: 10px 0px 0px 1px;
     margin: 0;
   }

   #nav ul li {
     list-style: none;
     float: left;
     padding: 0 0 0 20px;
     font-weight: normal;
  }

  .navtext a {
     font-size:2.2em;
     padding: 1px 5px 1px 5px;
  }
}

After screen resize - http://i.stack.imgur.com/jvaKe.png

You could start by making the width and the margin-left of the #nav div less

#nav{
  width: 905px; /* too wide for (max-width: 479px) screen */
  position: relative;
  float: right;
  margin-left: 500px; /* too wide for (max-width: 479px) screen */
 }

more