Website Layout Issue (HTML5)

[MindF]

I'm designing my first website (for a start-up IT support company) and I have run into some issues in my learning. Problems are:[*]When I try to put a border around my nav element, it moves the nav box down the side to where it's still on the left, but below the the main (article?) section of the webpage. It also makes the border around my main header part thicker (only the side where the nav box is). [*]I cannot get the footer to align with the article section (even though both are supposed to be aligned to the center. I suspect the footer is not aligning because the nav box is changing the "center" alignment of the article).P.S. I don't understand why this post is being downvoted into oblivion... I haven't found the answer to this question anywhere else, nor do I think it is a senseless one. Here is the jsfiddle for my site: http://jsfiddle.net/EchoedTruth/a4CLL/\[code\] `$` <nav style="background-color: red"> <table> <ul> <tr> <td><li><a href="http://stackoverflow.com/questions/14567068/BTSMain.html"><b>Home</b> </a></li></td> </tr> <tr> <td> <li><a href="http://stackoverflow.com/questions/14567068/BTSServices.html"><b>Services We Offer</b></a></li> </td> </tr> <tr> <td> <li><a href="http://stackoverflow.com/questions/14567068/BTSAboutUs.html"><b>About Our Company</b></a></li> </td> </tr> <tr> <td> <li><a href="http://stackoverflow.com/questions/14567068/BTSTestPage.html"><b>Testing Page</b></a></li> </td> </tr> <tr><td><li><a href="http://stackoverflow.com/questions/14567068/BTSTestPage2.html"><b>Testing Page 2</b></a></li></td></tr> </ul> </table> </nav> `$`\[/code\]