My page online is not matching what I Have in DW

Question

Hello,
The following is my first real effort at a website:  http://wisercharitable.org/vr_index.html
For the past few months it has looked just fine, but I have added a page here and there in the past week or two and something went wrong.  It has something to do with the font size because when I go online, it is huge compared to what it looks like in DW.  In fact, it doesn't even fit properly on the page.  Also, it appears to have impacted every page, leading me to believe the problem is on the styles sheet.  I'm sure it happened as a result of a change I made recently, but I can't figure out what that would be and why the pages all look fine in DW.  Any thoughts would be appreciated as I am learning as I go. 
Here is my styles sheet code as well:
@charset "utf-8";
/* CSS Document */
body {
                background-color: #000;
#container {
                height: 1200px;
                width: 900px;
                left: auto;
                right: auto;
                background-image: url(Images/vr_grad.jpg);
                margin: 0 auto;
#header {
                width: 878px;
                height: 130px;
                background: #FFFFFF;
                background-image: url(Images/vr_header.jpg);
                border: 1px solid #000000;
                padding: 10px 10px 10px 10px;
#date {
                width: 880px;
                height: 20px;
                background-image: url(Images/vr_redgrad2.jpg);
                border: 1px solid #000000;
                padding: 10px 10px 10px 10px;
                text-align: center;
                font-family: Georgia, "Times New Roman", Times, serif;
                font-size: 20px;
                font-weight: bold;
#left_column {
                width: 150px;
                height: 864px;
                float: left;
                margin: 5px 5px 0 0;
                border: 1px solid #000000;
                padding: 10px 10px 10px 10px;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                background-image: url(Images/vr_yellowgrad.jpg);
#center_column {
                width: 890px;
                height: 936px;
                margin: 5px 5px 5px 0;
                padding-right: 10px;
                font-size: 18px;
                font-weight: bold;
#center_column h2 {
                font-size: 36px;
                font-style: italic;
p {
                margin: 0;
                font-weight: bold;
                color: #000;
#footer {
                width: 880px;
                height: 80px;
                border: 1px solid #000000;
                padding: 10px 10px 10px 10px;
                background-image: url(Images/vr_grad.jpg);
                font-size: 14px;
                font-family: Georgia, "Times New Roman", Times, serif;
                text-align: center;
                font-weight: 100;
.links {
                font-size: 24px;
.events {
                font-size: 24px;
.floatright {
                float: right;
                margin-left: 5px;
                margin-top: 10px;
.floatleft {
                float: left;
                margin-right: 5px;
                margin-bottom: 5px;
.gfr {
                font-size: 20px;
                color: #CC9900;
.gfr {
                color: #000;
                font-size: 18px;
.gfr {
                font-size: 18px;
#container #center_column .ms_title {
                font-weight: normal;
                font-size: 18px;
.Sharp {
                font-weight: bold;
.bold {
                font-size: 18px;
                font-weight: bolder;
.spon {
                font-weight: bold;
Thanks for any help you all can offer.
Chris

Answer 1

Two things I see...
You are setting the height of your green gradient <div> in the css. Height should be determined by content specifically for the reason you are seeing on your site. The height of that <div> is too small for all of the content within it so you have overflow issues.
Once you fix that by removing the height:936px setting, the other problem occurs. Your background gradient image isn't large enough to fill the correct height of your <div> so when the <div> expands, the black text falls over the black background.
You can increase the size of the vr_grad.jpg, or look into using css gradients (a google search will give you a bunch of sites). I know there are a few here who use: http://www.colorzilla.com/gradient-editor/ to generate the code.