html - 如何让一个div填满所有水平空间

Question

我是 html 和 css 的新手，在创建培训页面时，我制作了一个 div 来填充顶部的水平空间。

但是我没有成功，我也不知道为什么，我尝试调整边距、填充，在互联网上四处寻找，但没有找到适合我的情况的解决方案。我想知道是否可以只用一个 div 填充所有水平空间。

这是我的代码目前的样子:

@charset "UTF-8";	
@import url('https://fonts.googleapis.com/css?family=Orbitron');

body{
  background-color: green;
  color: green;
  font-family: 'Orbitron', sans-serif;
  overflow-x: hidden;
}
div#page{
  width: 900px;
  height: 900px;
  background-color: black;
  box-shadow: 1px 1px 500px rgb(0,0,0);
  padding: 10px;
  margin: 0px auto 0px auto;
}
div#pageHead {
    width: 102%;
    background-color: rgb(20,20,20);
    height: 70px;
    position: relative;
    margin: -8px 0px auto 0px;
}

<div id="pageHead">		
  <header></header>
</div>

<div id="page">
  <header>
    this is a test
  </header>
</div>

Answer 1

只需将 margin:0 应用于 body 标签。您正在从正文中获取默认边距。

body{
    background-color: green;
    color: green;
    font-family: 'Orbitron', sans-serif;
    overflow-x: hidden;    
    margin:0;
}
div#page{
    width: 900px;
    height: 900px;
    background-color: black;
    box-shadow: 1px 1px 500px rgb(0,0,0);
    padding: 10px;
    margin: 0px auto 0px auto;
}
div#pageHead {
    width: 102%;
    background-color: rgb(20,20,20);
    height: 70px;
    position: relative;
    margin: -8px 0px auto 0px;
}

<div id="pageHead">     
        <header></header>
    </div>

    <div id="page">
            this is a test  
    </div>