How to make Twenty Seventeen theme full width in WordPress

The default WordPress theme Twenty Seventeen's content width can be easily changed to full width. All you need is this bit of CSS. To make Twenty Seventeen full width in WordPress, add the following CSS to your theme's CSS file, or in Customizer's Additional CSS.
Published on Wednesday, 8 March 2017
php wordpress

Here is how to make WordPress Twenty Seventeen theme full width with CSS.

.wrap {
  max-width: 100%;
}
 
@media screen and (min-width: 48em) {
  .wrap {
    max-width: 100%;
  }
}
 
.page.page-one-column:not(.twentyseventeen-front-page) #primary {
  max-width: 100%;
}

@media screen and (min-width: 30em) {
  .page-one-column .panel-content .wrap {
    max-width: 100%;
  }
}

You can adjust the 100% values. Set these to 90% for example for a 90% main content width.