My web page centers in the design view, but not when viewed on line.

Question

I am new to web design and of course, to this forum.  I had some background in VBA and Fortran, so when the original designer left, I was the only one in the organization willing to tackle the website and try to teach myself how to make it work and keep it current.  We were financially in the red at the time, so hiring outside help would have been almost impossible.  We are finally breaking even now, which was our goal as a non-profit.
So I inherited the computer and the responsibility for maintaining the website at a non-profit organization for kids in Florida a couple of years ago, and I am doing pretty well with it so far, even though my depth of knowledge is very shallow.  AsI said before, I am entirely self taught, mostly by the trial and error method, so please excuse what is probably a very basic question. 
My website is FloridaBandTournament.com.
The site is working pretty well for my users, but from an appearance standpoint, the pages always are on the left side of the screen.  I would like to center the page(s) in the screen so that it looks a little better.  They are on a black background - not sure how the background got there, but it is working fine for me.  When I tried to center the pages, I googled my way to the statement text-align: center, and after placing it a couple of different places in the code, it suddenly seemed to work, at least in the in Dreamweaver 8 (I also inherited the software, which is I know is old, but so am I - will be 70 soon, and do my work for free for the organization).  But when I went to a couple of different browsers, it still displayed the website on the left.  I tried Firefox and IE.  I am at a loss as to what to do.
When I found this forum, I thought maybe somebody could help me know what to do to make this centering of the page happen in a simple way for this old geezer.  I would sure appreciate it.
I do not know what I should be communicating to you, but I thought if I sent the code in the body, it might help.
The body code is as follows;
body  [
    background-image: url(file:///C|/Documents and Settings/user/Application Data/Macromedia/Dreamweaver 8/configuration/ServerConnections/www/images/background.gif):
   background-color:  #000000;
   margin-top:  0px;
   margin-left: 0px
   margin-bottom: 0px
   margin-right: 0px
  text-align:center
None of the pages in the active website have this code yet - I have a trial page that I am testing.  The trial page can be accessed from the link at the bottom of the 'links' page for 'Show Host Infoormation' (the mis-spelling is temporary and intentianal so I can find the darn test link myself when I want to).
I would be glad to provide any information that might help someone understand what I have and what I am trying to do, but again, I am self-taught so I have little understanding of the technical terms.  I would sure appreciate any help.  Thanks in advance.
Bob

Answer 1

First obviously make a back-up of the pages/s.
Go into code view in Dreamweaver and find the below html. Its near the top of the page after the css. You don't need to first table <table> </table> so you can delete that. It's the second table that we are interest in. See below I have added id="pageWrapper" to the opening <table tag.
<table width="795" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="795" height="19" valign="top" bgcolor="#000000"><!--DWLayoutEmptyCell--> </td>
  </tr>
</table>
<table id="pageWrapper" width="795" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
Then add this to your css styles in the head setcion of the page.
#pageWrapper {
    margin: 0 auto;
You'll have to do this for each page of the site you want centered, which could be a pain if you have many pages.
Also your background image is linked to your local computer thats why you are not seeing it but have a black background instead:
body {
    background-image: url(file:///C|/Documents and Settings/user/Application Data/Macromedia/Dreamweaver 8/Configuration/ServerConnections/www/images/background.gif);
    background-color: #000000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
If you want the image to appear amend the link to as below:
body {
    background-image: url(images/background.gif);
    background-color: #000000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;