Something in my CSS is causing a random white bar to appear, how do I fix it?

Question

This is the website: http://gerald.rcg.usm.maine.edu/~novice/USMfuture/USMfuture/ ~as you can see there is a random white space above HOME

I'm pretty sure the problem is with the CSS code but I cant figure out where the problem is. CSS:

 *body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}
body {
    font: 14px/24px Helvetica, Sans-Serif; color: #333333;
    background: #f5f5f5;
}
a {
    color: #29527A;
    text-decoration: none;
}
    a:hover {
        color: #792323;
    }

#container {
    width: 975px; margin: 0 auto;
}
#header {
    overflow: hidden;
}
    #header #logo {
        margin: 30px 0 10px 15px; float: left;
    }

     #header #subscribe {
        list-style: none; float: right; margin: 35px 30px 0 0;
        font-size: 16px;
    }
        #header ul#subscribe li.facebook {
            background: url("facebook.png") left no-repeat;
            padding: 5px 0 5px 40px; margin: 0 0 10px 0;
        }
        #header ul#subscribe li.YouTube {
            background: url("usm2.png") left no-repeat;
            padding: 5px 0 5px 40px;
        }
#main {
    border: 4px solid #4775A3;
    overflow: hidden;
    box-shadow: 0px 0px 5px #d8d8d8;
    -moz-box-shadow: 0px 0px 5px #d8d8d8;
    -webkit-box-shadow: 0px 0px 5px #d8d8d8;
    border-bottom: 15px solid #fff;

}
#main #content {
    width: 590px; float: right; padding: 35px 30px 60px 30px;
}
    #main #content h2 {
        font-size: 24px; font-weight: normal; text-transform: uppercase;
        margin: 0 0 15px 0;
    }

    #main p {
        margin: 0 0 24px 0;
    }

    #main #content .post-thumbnail {
        float: left; margin: 4px 10px 5px 0;
    }
        #main #content .post-thumbnail img {
            padding: 1px; border: 1px solid #eaeaea;
        }
            #main #content .post-info {
                padding: 1px; border: 1px solid #e9e9e9; margin: 0 0 60px 0;
            }
                #main #content .post-info ul {
                    background: #e9e9e9; list-style: none; text-transform: uppercase;
                    padding: 15px 20px 10px 20px; overflow: hidden;
                }
                    #main #content .post-info ul li.date {
                        float: left; 
                    }

                    #main #content .post-info ul li.read-more {
                        float: right; 
                    }
            #main #content .pagination {
                overflow: hidden; margin: 0 0 60px 0;
            }       
                #main #content .pagination p {
                    width: 180px; border: 1px solid #e9e9e9; padding: 1px;
                    text-align: center;
            }


        #main #content .pagination p.prev { float: left; }
        #main #content .pagination p.next { float: right; }
        #main #content .pagination p a {
            display: block; background: #e9e9e9; padding: 15px 0px 10px 0px;
            text-transform: uppercase;
        }   

        #main #side {
            width: 263px; float: center; padding: 15px 30px 15px 15px;
            border-top: 15px solid white;
        }   

        #main #side ul#pages li{
            border: 1px solid #e9e9e9; padding: 1px;
            margin: 0 0 10px 0; text-align: left; 
            list-style-type: none;
        }   
            #main #side ul#pages li a, #main #top ul#categories li a {
                display: block; background: #e9e9e9; padding: 15px 20px 10px 20px; 
                text-transform: uppercase;
            }


#main #side h3 {
    font-size: 20px; font-weight: normal; text-transform: uppercase;
    margin: 0 0 10px 0; text-align: left;
}           

#main #side form{
    overflow: hidden; margin: 0 0 30px 0;
}   
    #main #side input.searchbar {
        float: left; width: 193px; height: 25px; padding: 8px 13px 6px 13px;
        background: #fff; border: 1px solid #e9e9e9;
        font: 14px Helvetica, Sans-Serif; color: #7e7e7e;
    }
    #main #side input.searchbutton {
        width: 34px; height: 34px; float: right; margin: 3px 0 0 8px;
        background: url(images/search-icon.png); text-indent: -9999px;
        cursor: pointer;

        padding: 0 0 0 34px; /*IE Fix*/
    }*

HTML:

*

<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang= "en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> USM Future </title>

    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

    </head>


<body onload="initialize();"> 

<div id="Container">
    <div id="header">
    <h1><a href="#"><img src="usm.png" alt="Return to the homepage"  height="150" width="150" id="logo"/></a></h1>

    <ul id="subscribe">
        <li class="facebook"><a href="https://www.facebook.com/USouthernMaine">Find us on Facebook</a></li>
        <li class="YouTube"><a href="http://usm.maine.edu/">Official Website</a></li>
    </ul>
    </div>

    <div id="main">
        <div id="content"> <!--main content-->
            <div id="post">
                <h2><a href="#"> First Blog </a></h2>
                <a href="#" class= "post-thumbnail"><image src="Grumpy-Cat-01.jpg" height="50" width="50" alt="Read the full post" /></a>
                <p>Just a random bunch of text, trying to figure out what it does.Just a random bunch of text, trying to figure out what it does.Just a random bunch of text, trying to figure out what it does.
                Just a random bunch of text, trying to figure out what it does.Just a random bunch of text, trying to figure out what it does. </p>

                <div class= "post-info">
                    <ul>
                        <li class="date"> 21st March 2014 </li>
                        <li class="read-more"><a href="#"> Read more </a></li>
                    </ul>
                </div>
            </div>  

            <div class="pagination"> <!-- supposed to be hidden when no other pages are available-->
                <p class="prev"><a href="#">Older articles</a></p>
                <p class="next"><a href="#">Newer articles</a></p>
            </div>

        </div> <!-- content div close-->


        <div id="side"><!--side bars-->
                <ul id="pages">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Archives</a></li>

                <!--Imbed twitter feed on the left side -->
                <a class="twitter-timeline"  href="https://twitter.com/search?q=%23usmFuture"  data-widget-id="454688984321372160">Tweets about "#usmFuture"</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            </ul>


        <h3> Search </h3>
        <form method="get" id="search" action="#">
            <fieldset>
                <input type="text" class="searchbar" />
                <input type="button" class="searchbutton" value="Search" />
            </fieldset>
        </form>
        </div>

    </div> <!-- main div close -->
</div>  <!-- container div close --> 
    </body>
</html>

*

Answer 1

It's the border here:

#main #side { border-top: 15px solid #FFFFFF; padding: 17px 30px 15px 15px; width: 263px; }

Answer 2

Not much of a mystery:

#main #side {
   border-top: 15px solid white;
}

Remove this style and it will take care of the line.