定位问题

Question

当我放大和缩小时，背景颜色中的灰色会越过红色边框。我该如何阻止这种情况发生？

我的CSS：

body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#fff;
    padding-top:30px;
    margin: auto;
    position:relative;
    height:2055px;
    border: 1px solid red;
    width:1050px;
    background-color: #090909;
    margin-top:15px;
}
.backgroound {
    position:relative;
    top:-50px;
    /* this gray goes over red border  */
    background-color: gray;
    height:1950px;
    border: 1px solid gray;
    width:985px;
}
.paa {
    background-color:black;
    font-size:40px;
    position:relative;
    border: 1px solid gray;
    padding: 0px;
    text-align:center;
    height:80px;
    margin-top:-30px;
}

我的HTML：

<header class="paa"> <a href="#">
    <img src="" alt="loggo">
</a>
</header>
<nav>
    <ul>
        <li> 
            <a class="vari" href="" id="home"><span  >Home</span></a> 
        </li>
        <li>
            <a class="vari" href="" id="m">llls</a> 
        </li>
    </ul>
</nav>
<div class="backgroound"></div>

Answer 1

所以你需要灰色div位于红色边框的中心？ 如果是这种情况，请添加以下行：

T(x)

检查这个小提琴：https://jsfiddle.net/x3uc9qm5

Answer 2

您需要缩短.backgroound的高度。

或者：

height: 1830px;

或

height: 87%;

小提琴：http://jsfiddle.net/ryanpcmcquen/1q52w0jf/