html - 基本div；容器和 wrapper

我刚开始制作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

最佳答案

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

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

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

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

See the working fiddle

关于html - 基本div；容器和 wrapper ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21578947/