Here's one solution:
Start by saving a duplicate of your home page for editing. Don't make any sweeping changes until after you've tested the results across all major browsers.
Open your duplicate page. Starting at approximately line 38, remove the following code:
HTML Code:
<tr>
<td style="text-align: center;"><center><table>
<tr align="center">
<td>
<ul id="tabmenu">
<li><a href="http://nfpc.org.uk/index.shtml" id="Home">Home</a></li>
<li><a href="http://nfpc.org.uk/History/Index.shtml" id="History">History</a></li>
<li><a href="http://nfpc.org.uk/Services/Index.shtml" id="Services">Services</a></li>
<li><a href="http://nfpc.org.uk/Songs/Index.shtml" id="Songs">Songs</a></li>
<li><a href="http://nfpc.org.uk/BoysBrigade/Index.shtml" id="BB">Boys Brigade</a></li>
<li><a href="http://nfpc.org.uk/GirlGuids/index.shtml" id="GG">Girl Guides</a></li>
<li><a href="http://nfpc.org.uk/Toddlers/index.shtml" id="Toddlers">Toddlers</a></li>
<li><a href="http://nfpc.org.uk/ContactUs/index.shtml" id="Contacts">Contact Us</a></li>
</ul>
</td>
</tr>
</table>
</center></td>
</tr>
Then put your navigation menu into the next lower row just above the "MainArea" table. Something like this:
HTML Code:
<table width="100%" >
<tr>
<td style="text-align: center; margin-left:auto; margin-right:auto"><center><table class="Header" >
<tr>
<td ><img src="http://nfpc.org.uk/Imgs/logo2.jpg" height="70px" width="50px" alt="Logo" /></td>
<td>Northfield Parish Church</td>
<td align="right"><img src="http://nfpc.org.uk/Imgs/logo2.jpg" height="70px" width="50px" alt="Logo" /></td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td style="text-align: center; vertical-align: top;" align="center">
<ul id="tabmenu">
<li><a href="http://nfpc.org.uk/index.shtml" id="Home">Home</a></li>
<li><a href="http://nfpc.org.uk/History/Index.shtml" id="History">History</a></li>
<li><a href="http://nfpc.org.uk/Services/Index.shtml" id="Services">Services</a></li>
<li><a href="http://nfpc.org.uk/Songs/Index.shtml" id="Songs">Songs</a></li>
<li><a href="http://nfpc.org.uk/BoysBrigade/Index.shtml" id="BB">Boys Brigade</a></li>
<li><a href="http://nfpc.org.uk/GirlGuids/index.shtml" id="GG">Girl Guides</a></li>
<li><a href="http://nfpc.org.uk/Toddlers/index.shtml" id="Toddlers">Toddlers</a></li>
<li><a href="http://nfpc.org.uk/ContactUs/index.shtml" id="Contacts">Contact Us</a></li>
</ul>
<table class="MainArea" style="text-align: center;">
Once you've done this, save your duplicate page. Open up your CSS Stylesheet and define the #tabmenu width as 900px or whatever you want it to be. You may want to remove the bottom border at this point as the menu should be sitting atop the main content area. Make your changes and save the file.
At the very least, be sure to test the page in Internet Explorer and FireFox before replacing the code in the rest of your pages. Don't forget to delete the duplicate page when you're satisfied that all is well!
Don't hesitate to ask for more assistance and please pass along my best regards to Stella!