Help with alignment in Dreamweaver CS5

Question

Hello,
I've tried to follow all the tutorials regarding alignment with wrappers etc... but I still can't get it right. Worse, what was right originally, ie.e the navbar went haywire too. I'm at a loss and would be very grateful is someone could help me out.
Many thanks,
Sylvie
The website is:
www.insanitydefensethemovie.com
This is the CSS code:
@charset "UTF-8";
body {
    background-color: #000;
    margin:0 auto;
#main_wrapper {
    position: relative;
    width:960px;
    margin:0 auto;
    top: 0px;
#main_nav_bar {
    position:absolute;
    width:960px;
    height:60px;
    z-index:1;
    left:auto;
    right:auto;
    top:0;
#front_image {
    position:absolute;
    width:960px;
    height:670px;
    z-index:1;
    left:auto;
    right:auto;
    top:60px;
.overlay_social_media {
    position:absolute;
    top:731px;
    width:235px;
    height:47px;
    float: left;   
#social_media {
    position:absolute;
    left:727px;
    top:22px;
    width:235px;
    height:47px;
    z-index:1;
    visibility: visible;
#wrapper_video {
    width: 560px;
    position: absolute;
    height: 315px;
    margin-top: 380px;
    margin-right: 400px;
    left: 287px;
    top: 60px;
#wrapper_appeal {
    width:212px;
    height:273px;
    margin-top:380px;
#wrapper_paypal {
    position:relative;
    margin-left:30px;
    top:20px;
.holder {
    position:absolute;
    width:960px;
    height:670px;
    top: 20px;
    left: 30px;
    width: 168px;
    left: 14px;
    top: 158px;
    left: 0px;
    top: 158px;
    top: 46px;
.overlay {
    top:392px;
    position:absolute;
    background-image:url(../Images/home/appeal_bckgd.png);
    background-repeat:no-repeat;
    width:212px;
    height:273px;
    left: 45px;
.overlay h1 {
    color:#F00;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    margin-left: 50px;
    margin-top: 30px;
.overlay h3 {
    color:#FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align:center;
    font-size: 16px;
    margin-right: 10px;
    margin-left: 10px;
.overlay paypal_button {
    position::absolute;
    margin-left: 50px;
#apDiv2 {
    position:absolute;
    left:18px;
    top:790px;
    width:1266px;
    height:466px;
    z-index:2;
#wrapper_copyright {
    position: relative;
    left:252px;
    top:452px;
    width:522px;
    height:22px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFF;
    text-align: center;
    margin-top: 600px;
.copyright {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #EEE;
    text-align: center;
#Twitter_wrapper {
    position::relative;
    top:850px;
    bottom:600px;
#Twitter_heads_wrapper {
    position:absolute;
    top: 765px;
    margin-left:8px;
    left: 3px;
    width: 699px;
    height: 17px;
.twitter-header    {
    font-family:"Bebas Neue";
    color:#FFF;
    font-size:36px
#Twitter_wrapper #twitter1 {
    position:absolute;
    top:850px;
    margin-left:8px;
    float: left;   
#Twitter_wrapper #twitter2 {
    position:absolute;
    top:850px;
    margin-left:360px;
    float: left;   
#social-media #twitter-feeds .twitter-header {
    font-family: "Bebas Neue";
    font-size: 14px;
    color: #FFF;
#social-media #twitter-feeds #user-timelines .twitter_timeline {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #EEE;
/* CSS Document */

Answer 1

The best way to get any help here is by posting a link to the test
page.  Code is not appropriate in cases like this.  People have to see
what is happening before suggesting anything.
Good luck.