Suddenly misaligned navigation bar

The navigation bar (can be viewed here) has become misaligned in Google Chrome (latest version) without any change to the coding.

The large white space present between the two rows did not used to exist, nor did the further misalignment of the four far right links.

I am only of aware of this issue in Chrome - it displays correctly in Safari and Firefox.

Code:

A code snippet for the navigation bar in the header.php is below:

<center>

<div class="navholder">
<div class="navigate">
<ul class="navigate">
<li class="navigate"><a href="../index.php">Home</a></li>
<li class="navigate"><a href="../buses.php">Bus Routes</a></li>
<li class="navigate"><a href="../maps.php">Maps &amp; plans</a></li>
<li class="navigate"><a href="../news.php">News</a></li>
<li class="navigate"><a href="../myallocations.php">Enthusiasts</a></li>
<li class="navigate"><a href="../myroute/index.php">MyRoute</a></li>
<li class="navigate"><a href="../tbrtwitter.php">Live updates</a></li>
<li class="navigate"><a href="../tickets.php">Tickets</a></li>
</ul>
</div></div>

<div class="navigateopposite">
<ul class="navigateopposite">
<li class="navigateopposite"><a href="../conpasses.php">Free travel</a></li>
<li class="navigateopposite"><a href="../mobileservices.php">Mobile</a></li>
<li class="navigateopposite"><a href="../operators.php">Operators</a></li>
<li class="navigateopposite"><a href="../usingthebus.php">Using the bus</a></li>
<li class="navigateopposite"><a href="../team.php">TBR Team</a></li>
<li class="navigateopposite"><a href="../contact.php">Contact</a></li>
<li class="navigateopposite"><a href="../advertise.php">Advertising</a></li>
<li class="navigateopposite"><a href="../about.php">About</a></li>
</ul>
</div></div>

</center>

CSS:

The related CSS is also here:

/*Navigation bar*/
.navigate ul{float:left;width:1050px;margin-top:1px;text-align:center;}
.navigate ul li{display:inline;}
.navigate ul li a{width:127px;background:url(../images/navbar.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigate ul li a:hover{color: #fff;}
.navigate ul li a:active{color:#FFF;}

.navigateopposite ul{float:left;width:1050px;margin-top:1px;}
.navigateopposite ul li{display:inline;}
.navigateopposite ul li a{width:127px;background:url(../images/navbaropposite.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigateopposite ul li a:hover{color: #fff;}
.navigateopposite ul li a:active{color:#FFF;}

Question:

What would be causing this strange misalignment?

Solution

Try adding this to your CSS

li.navigate, li.navigateopposite {
    float: left;
    margin: 0;
}

I added this through Chrome's developer tools and it seemed to remedy the problem.

This might fix it but seriously... as j08691 and David Thomas pointed out... that's some pretty crazy HTML you've got going on there. With nothing but good intentions, I hope you don't mind if I make a few comments?

You've got multiple <head>s in your document - you can only have one.
You're using <div> purely for layout purposes - if you need to add spaces in the layout you should be using pure CSS... HTML, as the name describes, is for markup only - not style information. By my reckoning you could lose at least half of that markup. As a generalisation, the more markup you have, the more difficulties you're going to get into like stuff apparently breaking randomly.
I can understand not wanting to support IE7 at a push, but all versions of IE?? ("Something not working? You're using Internet Explorer"). I know IE can be pretty hateful but you can't throw the book at 10% of all of your website visitors.

I hope this helps set you in the right direction.