<!-- remember - codepen abstracts away some of the standard HTML page structure! -->

<!-- <html> (already included) -->
  <!-- <body> (already included) -->
    <h1>Page content</h1>
    
    <p>The body (or any block-level element for that matter) will stretch and change height to accomodate whatever content you put inside it.</p>
  <!-- </body> (already included) -->
<!-- </html> (already included) -->

    <h2>Heading</h2>

    <p>Paragraph.</p>

    <h2>Heading</h2>

    <p>Paragraph.</p>

    <h2>Heading</h2>

    <p>Paragraph.</p>

    <h2>Heading</h2>

    <p>Paragraph.</p>

    <h2>Heading</h2>

    <p>Paragraph.</p>

    <h2>Heading</h2>

    <p>Paragraph.</p>

    <h2>Heading</h2>

    <p>Paragraph.</p>

html {
  background-color: wheat;
}

body {
  background-color: lightgray;
  padding: 10px;
  
  /* this will create a 'constraint' */
  width: 80%;
  max-width: 500px;
  /* go ahead and try and be 100% width like normal... 
    but don't ever get bigger than this. */
  
  /* this will confuse the body and center it */
  margin-right: auto;
  margin-left: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.