<section> <!-- full-width 100% block element -->
  plain section (or otherwise 'box')<br>
  arbitrary height set just to seperate the sections.<br>
  in practice, the content would determine the height of the parent.
</section>


<section> <!-- full-width 100% block element -->
  <div>
    section showing max-width
  </div>
</section>


<section> 
  <div class='inner-column'>
    section showing <em>centered</em>
  </div>
</section>


<section class='with-background-color'> 
  <div class='inner-column'>
    section showing background color
  </div>
</section>


<section class='with-background-image'> 
  <div class='inner-column'>
    section showing background image
  </div>
</section>

* {
  box-sizing: border-box;
}

section {
  border: 4px solid lime;
  min-height: 26vh; /* arbitrary height */
}

div { /* a child element of the section */
  max-width: 400px;
  border: 4px solid dodgerblue;
} /* to help constrain the content visually */

.inner-column {
  width: 80%; /* something you can also do - but usually it's 98 or 100% */
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  border: 4px solid #ff0066
}

.with-background-color {
  background-image: linear-gradient(to right, salmon, lightblue);
  /* note that if you put padding on the parent section
     vs. the inner-column - what would happen? */
}

.with-background-image {
  background-image: url('https://assets.codepen.io/4806767/cat.jpg');
  background-size: cover; /* try and cover it */
  background-position: center; /* keep it centered both ways */
}




































/* just for some presentation */
section + section {
  margin-top: 30px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.