If you were to restructure your HTML, moving your 'ul' into the header, it's very easy.
<header>
<div id="logo">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo">
</div>
<div id="menu">
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</header>
and the CSS needed
header { width: 700px; }
#logo { float: left; }
#menu { float: right; }
#menu ul { padding: 0; margin: 0; }
Here is a JSFiddle showing it working: http://jsfiddle.net/STu89/
I've also removed a which wasn't opened and stripped out various /div which weren't matched.