HTML5/CSS3 proprely lining up elements

I am building a website with 3 "main" elements, a banner, a Nav section and the content section (see joint image) Site Plane. However, I would like to know what is the "proper" way to line up the different elements on a vertical (I mean left - right) axis using CSS propreties. I have investigated the static, absolute, relative attributes but nothing quite worked. I'm obviously doing it wrong but what should I do?

Here's my CSS code

     @font-face { font-family: Florsn17; src: url('fonts/Florsn17.ttf'); } 
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px gray; 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px white; 
}

body {
    font-family:Arial,Helvettica,sans-serrif;
    background-image:url("images/background.jpg");
    background-color:black;
}

header {
    background-color:black;
    height:300px;
    width:720px;
    float:center;
    border-style:ridge;
    border-width:1px;
    margin-left:auto;
    margin-right:auto;
}

div#center {
    background-color:#333;
    background-image:url("images/menuBarBackground.jpg");
    border-style:ridge;
    border-width:1px;
    width:720px;
    height:86px;
    margin-left:-1px;
    margin-right:auto;
}

li#item_Home {
    margin-left:-40px;
    margin-top:-16px;
}

ul#menu li {
    float: left;
    list-style-type:none;
    padding:0px;
}

li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    padding:16px;
    padding-right:30px;
    padding-left:30px;
}

li a:hover {
    background-color: #111;
}

.current {
    background-color:#111;
}

#mainSection{
    background-color:#262626;
    opacity:0.8;
    position:relative;
    top:20px;
    left:-112px;
    width:720px;
    border-style:ridge;
    border-width:1px;
    overflow:auto;
}

#mainSection article {
    font-family: Florsn17,Arial,Helvettica,sans-serrif;
    color:white;
    padding:20px;
    line-height:1.5em;

}

#video {
    padding-bottom:10px;
}

#googleMapScreenCap {
    padding-top:20px;
    padding-bottom:10px;
}

Thanks for your help!