How to make one div fill all horizontal space - html

Question

I'm new to html and css, and while I was creating a page for training, I made one div to fill the top horizontal space.
However I did not have succsess in doing that, and I have no idea why, I tried tweaking the margins, the padding, looked around on the internet and found no solution for my case. I wanna know if it is possible to fill all horizontal space with only one div.
Here is how my code currently is looking:
#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

Just apply margin:0 to the body tag. You are getting the default margin from the 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>

Answer 2

Try this
body{ margin :0; background-color: green;color: green; font-family: 'Orbitron', sans-serif; overflow-x: hidden;}

Answer 3

A div by default takes up as much horizontal space as possible. So it is generally as wide as its parent element.
As I understand your problem you are missing the the last few pixels on either side. This is not an issue of the div, but of the body element. The body element has to a default margin.
So you have to set the body margin to 0 (zero). Then you can either not specify a width for the div or give the div a width of 100%.
Then the div should take up the whole horizontal space of the webpage.

Answer 4

First problem, your page div is not valid (closed tag that is never opened).
For the width, add
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
to reset browser styles.
https://jsfiddle.net/dtz5h9yh/3/
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Orbitron');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
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: 0;
}
<div id="pageHead">
<header></header>
</div>
<div id="page">
<header>
this is a test
</header>
</div>

Answer 5

Add this to your CSS:
*{
margin:0;
padding:0;
}
div#page{
width:100%;
}
Also remove the </header> from the div with id"page".
hope this helped