html - 基本分区；容器和包装

Question

我刚开始制作 HTML，我需要一个 100% 宽度的容器和一个 980px 且居中对齐的包装器。我只是将我的代码粘贴到 JSFIDDLE 中。代码有什么问题？

#section-1{
    background: #f7f3ed;
    margin: 0 auto;
    width: 100%;
    max-width: 1300px;
    position: relative;
    padding: 30px 0 100px 0;
    border: 2px solid red;
}
#section-1 h2{
    font-size: 32px;
    font-family: 'Helvetica Neue';
    margin-bottom: 20px;
}
.wrapper-1{
    text-align: center;
    width: 980px;
    background: #fff;
    border: 2px solid blue;
    position: relative;
}

<div id="section-1" class="wrapper-1">
        <h2>Hey this is just a test</h2>    
        </div>

JS FIDDLE

Answer 1

您只有一个元素，您同时分配了一个 id 和一个类。您需要一个部分，并且在该部分内有一个包装器，如下所示:

<div id="section-1">
    <div class="wrapper-1">
        <h2>Hey this is just a test</h2>
    </div>
</div>

为了演示，我将包装器的宽度更改为 280px，将其更改为您想要的任何值。要水平居中 block 元素，您需要给它们一个自动边距:

.wrapper-1{
    text-align: center;
    width: 280px;
    background: #fff;
    border: 2px solid blue;
    position: relative;
    margin: 0 auto;
}

See the working fiddle