Question

所以我正致力于一个工作项目。底部的黑色长容器不会跨越页面的整个宽度。它会在两侧缩短几个像素。这是我的代码：

   http://74.117.156.152/~pr0digy/

    <header class="mainHeader">
        <img src="images/uslegalbox.png" alt="usls box" >
    </header>

    <div class="textBox">

            <article class="capexText">
                <h2>Capital</h2><br />
                <h2>Expenditures</h2>
            </article>          

        <div class="buttonsBox">
            <nav><ul>
                <li><a href="#" >New CapEx</li>
                <li><a href="#" >Check Status</li>  
            </ul></nav>
        </div>

    </div>

和CSS一起使用它：

body {
        background: url('images/bg.jpg');
        background-size: 100%;
        background-repeat:no-repeat;
        color: #000305;
        font-size: 87.5%; /* Base font size is 14px */
        font-family: Arial; 'Lucida Sans Unicode';
        line-height: 1.2;
        text-align: left;
        width: 100%;    
}

.mainHeader {
        width: 30%
        height: auto;
        margin: 2% 0 0 -1%;
}

.mainHeader img {
        width: 35%;
        height: auto;
}

.textBox {
        margin-top: 10%;
        height: 275px;
        background-image: url('images/buttonsbox.png');
        background-repeat: repeat-x;


}

我确定我只是遗漏了一些简单的东西，所以任何帮助都会受到赞赏。谢谢！

Answer 1

确保您使用的重置样式表如Eric Meyers或Normalize.css，因此请将所有元素样式设置为默认值。（删除body / html填充等）

Answer 2

如果你添加了 margin:0; padding:0; 对于正文样式，它会将默认边距和填充重置为0。

div中的图像不跨越页面的整个宽度

2 个答案: