If you're looking to make the div '100% of the user's screen' (viewport), then @Itay and @Fujy both have the correct answers.
If you want the div to be in the same position as the grandparent (960px), you'll first need to define a reset based on the dimensions of the grandgrandparent (body). Then, position the child the same way as the grandparent using this code:
<body>
<div id="grandparent">
<div id="parent">
<div id="reset">
<div id="child">
</div>
</div>
</div>
</div>
</body>
Take note that the <body> has the same width as the viewport, and the grandparent will be positioned relative to this body/viewport. The child should be positioned in the same manner as the grandparent. Start by resetting to the viewport:
#reset { position:absolute; left:0; right:0; }
. Now it becomes simple to apply the same styles to the child as the grandparent.
The body/viewport/grandgrandparent is white, grandparent is gray, parent is blue, reset is red, and child is green:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
* { margin: 0; padding: 0; }
#grandparent {
width: 960px;
margin: 0 auto;
background-color: lightgray;
height: 100vh;
}
#parent {
width: 320px;
margin-left: 480px;
height: 100px;
border: 1px solid blue;
background-color: rgba(0,0,255,.30);
padding: 12px;
}
#reset {
position: absolute;
left: 0;
right: 0;
border: 1px solid red;
background-color: rgba(255,0,0,.30);
padding: 12px;
}
#child {
width: 960px; /* same as grandparent */
margin: 0 auto; /* same as grandparent */
border: 1px solid green;
background-color: rgba(0,255,0,.30);
padding: 12px 0;
}
</style>
</head>
<body>
<div id="grandparent">
<h1>Grandparent</h1>
<div id="parent">
<p>The parent can be anywhere.</p>
<div id="reset">
<div id="child">
<p>Child has same position as grandparent.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Note 1: #parent { ... } and all border, background and padding are only for visual clarity.
Note 2: The y-position remains relative to the parent. To reset along the y-axis, use top:0; bottom:0;.