When the body is used as the wrapper instead of a div, the content shifts eight pixels to the left (on a 1920×1080 display) when it extends below the fold. The examples below illustrate this difference in code snippets. Please note that the variance is only noticeable when running the code snippet in "Full page" mode.
Below are the code examples for using a) body as the wrapper and b) div as the wrapper:
a) Code for body as the wrapper:
body {
margin: 0;
height: 100%;
width: 100vw;
}
.wrapper {
max-width: 864px;
margin-right: auto;
margin-left: auto;
}
h1 {
font-size: 75px;
}<body class="wrapper">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</h1>
</body>b) Code for div as the wrapper:
body {
margin: 0;
height: 100%;
width: 100vw;
}
.wrapper {
max-width: 864px;
margin-right: auto;
margin-left: auto;
}
h1 {
font-size: 75px;
}<div class="wrapper">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</h1>
</div>