Use CSS to give my web page a white foreground, gray background (mimic MS Word)

Question

I'm rendering a large document (500 pgs) as a web page. My users are used to Word. Can I use CSS to mimic the look from the image below, a uniform 'page' with a white background with a fixed width, and the rest of their browser showing a gray background? Like the image below, except without the ribbon and all that:

The only think I can think of is to put the entire document inside a massive div tag, but is there a better way? Thanks.

Answer 1

This can be done fairly easily with 2 divs and a bit of css.

I also gave the white a border as per the image.

.container {
  background: #9099ae;
  width: 100vw;
  height: 100vh;
  padding: 40px 200px;
}

.content {

background: #fff;
width: 100vw;
height: 100vh;
margin: 0 auto;
border: 2px solid #000;
border-right: 4px solid #000;
}

<div class="container">

<div class="content">
</div>

</div>