html - 我网页右侧的空白

每当我放大时，我的网站右侧都会有一个奇怪的空间。该空间会变大。有人可以帮助我如何摆脱它。

这是我的HTML：

<html>
<head>
    <title>thesis</title>
    <link rel = "stylesheet" href = "styles and pics/index.css">
</head>
<body>
<div id = "outer_wrapper">
    <header>
        <section>
            <input type = "text" id = "username" name = "username" class = "text" placeholder = "E-mail"/>
            <input type = "password" id = "password" name = "password" class = "text" placeholder = "Password"/>
            <input type = "submit" id = "submit_login" name = "submit_login" class = "submit" value = "login"/>
        </section>
    </header>
    <footer>
        footer
    </footer>
</div>
</body>

这是我的CSS：

*{ padding:0px; margin:0px; }
body{ text-align:center;}
#outer_wrapper{ width:100%; height:700px; background-color:yellow; position:relative;}
header{ background-color:blue;height:70px;display:block;position:absolute;top:0px;width:100%;}
header section{ position:relative;top:20px;left:120px;}
.text{ height:25px;width:200px;padding-left:5px;}
#submit_login{height:25px;width:70px;background-color:green;border:0px;outline:none;cursor:pointer;color:white;}
.text,#submit_login{ margin-left:10px;}
footer{background-color:blue;height:40px;position:absolute;bottom:0px;width:100%;}

最佳答案

section { left: 120px; }引起了问题。默认情况下，section继承了width: 100%，因此将其向左移动将使总宽度增加120px。

假设您打算将标头部分向左偏移120px，则至少有两种方法可以解决此问题：

将section { left: 120px; }更改为section { margin-left: 120px; }
要么
将overflow: hidden;添加到标题元素，即header { overflow: hidden; }

否则，只需删除left: 120px;

关于html - 我网页右侧的空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25375931/