I am having trouble getting my css to line up properly.  My css is quite messy as I am a beginner, and a lot of it is there that probably doesn't need to be, because I was testing different things.  I need the two large silver bars to line up behind the login bar, and I can't seem to get them to get any closer to lined up than they are.  

Image

 

My css code.... 

#main {
    background-image: url(images/background.png);
    font-family: sans-serif;
}

#profileboxback {
    margin: 0 0 0;
    position: absolute;
    background-image: url(images/profilebox_back.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 220px;
    width: 220px;
    padding-bottom: 0px;
}
#profilebox {
    padding-top: 50px;
    font-style: normal;
    color: blue;
    text-align: center;
    font-weight: bold;
}

#topbarback {
    margin: 0 0 0;
    margin-left: 15px;
    margin-top: 60px;
    background-image: url(images/topbar_back.png);
    background-repeat: repeat-x;
    height: 220px;
}

#topbar {

}

#sidebarback {
    margin: 0 0 0;
    margin-left: 10px;
    padding-top: 0px;
    background-image: url(images/sidebar_back.png);
    background-repeat: repeat-y;
    width: 220px;
    height: 1000px;
}

#sidebar {

}

#meat {

}