How do I get rid of white line under header graphic

I only have a very basic understanding of css. I'm doing a 3 column layout from a tutorial and adding some of my own code to personalize the page. I have a 1px white line under my header graphic and I don't know how to get rid of it. You can see the problem at http://newgodsway.godswaynutrition.com I have another question following the css code. The css I'm using is:

body
{
margin: 0;
padding: 0px;
font-size: 95%;
font-family: georgia, times, "times new roman", serif;
color: #000;
background-color: #fff;
}



.underlinemenu
{
font-weight: bold;
background:#BB62AB;
}

.underlinemenu ul
{
padding: 6px 0 7px 0;
margin: 0;
text-align: center;
}

.underlinemenu ul li
{
display: inline;
}

.underlinemenu ul li a
{
color: #0000FF;
padding: 6px 3px 4px 3px;
margin-right: 20px;
margin-left: 20px;
text-decoration: none;
border-bottom: 2px solid #0000FF;
}

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: #00FFFF;
}




div#banner
{
height: 110px


}


div#container
{
background-image: url(leftsidebackground.jpg);
background-repeat: repeat-y;
}

div#container2
{
background-image: url(rightsidebackground.jpg);
background-repeat: repeat-y;
background-position: right;
}



div#navigation
{
float: left;
width: 150px;
padding-top: 1em;

}

div#navigation ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

div#navigation ul li { margin-top: 5px; }

#navigation ul li a
{
display: block;
width: 135px;
padding: 3px 5px 3px 10px;
text-decoration: none;
font-weight: bold;
color: #000;
background-image: url(menulinksbackground.jpg);
background-repeat: repeat-y;
}

#navigation ul li span
{
display: none;
}

#navigation ul li a:hover
{
color: #FFFF80;
position: relative;

}

#navigation ul li a:hover span
{
display: block;
position: absolute; top: -10px; left: 140px;
padding: 5px; margin: 10px; z-index: 100;
color: #000000;
background: #8BFEFE; border-width: 5px;
border-style: double; border-color: #0000FF;
width: 200px;

}

div#more
{
float: right;
width: 160px;
margin: 0;
padding: 0 0px 0 0;
color: #000;
padding-top: 1em;
}

div#more ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

div#more ul li { margin-top: 5px; }

#more ul li a
{

text-decoration: none;
font-weight: bold;
color: #0000FF;

}

#more ul li img
{

border-style: none;


}

div#more h3
{
margin-top: 0;
color: #000;
padding: .2em;
background-image: url(leftsidebackground.jpg);
background-position: right;
background-repeat: repeat-y;
text-align: center;
}

div#content
{
margin-left: 190px;
margin-right: 200px;
}

div#content h2
{
font-size: 2em;
color: #036;
margin: 0;
padding-top: 1em;
font-weight: normal;
}

div#content { line-height: 150%; }

#cleardiv
{
clear: both;
height: 1em;
}


SECOND QUESTION
How do I get the top menu (with the purple background) INSIDE the two blue columns on the left and right? I would like the two blue columns to butt up against the header graphic. Any help would be much appreciated, Rodney

 

I don't see any line below the header, may be you fixed that.
And if you want the top menu come inside the blue sidebar, then move them inside one of the sidebars?