HTML5/CSS3 正确排列元素

Question

我正在构建一个包含 3 个 "main" 元素、一个横幅、一个导航部分和内容部分（参见联合图像）Site Plane 的网站。但是，我想知道使用 CSS 属性在垂直（我的意思是左 - 右）轴上排列不同元素的 "proper" 方法是什么。我研究了静态、绝对、相对属性，但没有任何效果。我明明做错了，但我该怎么办？

这是我的 CSS 代码

     @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;
}

感谢您的帮助！

Answer 1

使用包含所有其他 HTML 元素的 容器 div，然后添加以下 CSS 规则使容器居中并它包含元素：

HTML

<body>
 <div class="container">
   <!-- header, navbar, etc -->
 </div>
</body>

CSS

.container {
   margin: 0 auto;
}

Answer 2

我想 header 是横幅，div#center 是导航，#mainSection 是内容。首先，我看到它们都有，例如，width:720px; 你可以创建一个包含所有这些的包装器（div），或者一个 class 来给它们相同的宽度（以及它们共有的所有属性）。包装纸是最好的选择。此外，在 wrapper/class 中，您设置 margin: 0 auto; 使它们居中。

HTML5/CSS3 正确排列元素

HTML5/CSS3 proprely lining up elements

html

css

elements

web