Twenty Seventeen Full Width Page Template

style.css

/* THIS SECTION IS FOR THE ENTIRE WEBSITE PAGE WIDTHS - ADD TO THE END OF STYLE.CSS - START */
/* STRUCTURE */

.wrap {
max-width: 80% !important;
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
max-width: 100% !important;
}

@media screen and (min-width: 48em) {
.wrap {
max-width: 80% !important;
}
}

@media screen and (min-width: 30em) {

.page-one-column .panel-content .wrap {
max-width: 80% !important;
}
}

@media screen and (max-width: 650px) {

.wrap {
max-width: 95% !important;
}
}
/* THIS SECTION IS FOR THE ENTIRE WEBSITE PAGE WIDTHS - ADD TO THE END OF STYLE.CSS - END */
/* THIS SECTION IS FOR INDIVIDUAL PAGE WIDTHS - ADDS AN OPTION IN EACH PAGE TEMPLATE - START */
body.page-template-template-full-width #content #primary {
	max-width: 100%;
}

body.page-template-template-full-width #content #primary .entry-header,
body.page-template-template-full-width #content #primary .entry-content {
    float: none;
    width: 100%;
}

body.page-template-template-full-width #content #primary .entry-header {
    margin-bottom: 4em;
}
/* THIS SECTION IS FOR INDIVIDUAL PAGE WIDTHS - ADDS AN OPTION IN EACH PAGE TEMPLATE - END */

template-full-width.php

<?php
/**
 * Template Name: Full Width
 *
 * Description: A custom template for displaying a fullwidth layout with no sidebar... ADDS FOR INDIVIDUAL PAGES
 *
 * @package Twenty Seventeen Child
 */
get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			while ( have_posts() ) : the_post();
				get_template_part( 'template-parts/page/content', 'page' );
				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;
			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();