Full width post

Hi there, Back again!
I still haven’t got anywhere with this.
All I want is to get the post full width (with no sidebars or sidebar place holders) and to get rid of the border around each of the sections – nothing I do works! (I really don’t want to have change theme just to get this to work).

The post is marked private & the code is on it’s own template file.
The tutorial I’m following is here (at about 4 mins).

Here’s the code:

<?php

/**
* Template Name: zzAnotherTry
* Template Post Type: post
 **/

add_action('full_width_content', 'do_full_width_content' );
 
add_filter('body_class', 'add_full_width_body_class' );
function add_full_width_body_class($classes) {
 
 $classes[] = 'full-width-template';
 
 return $classes;
 
}
 

 
function do_full_width_content(){ 
 
?>
 
<main>

<?php // check if the flexible content field has rows of data ?>
 
<?php if( have_rows('flexible_content') ): ?>
 
 <?php // loop through the rows of data ?>
    <?php while ( have_rows('flexible_content') ) : the_row(); ?>
 
 <?php // check current row layout ?>
        <?php if( get_row_layout() == 'hero' ): ?>
 <section>
 <div class="hero" style="background-image:url(<?php the_sub_field('hero_image') ?>)">
     
 <div class="cta_container">
 <div class="cta_content">
 <div class="cta_content wrap">
 <h2><?php the_sub_field('hero_text'); ?></h2>
 
 <?php $selected = get_sub_field('display_cta_button'); ?>
 
 <?php if( in_array( true , [$selected]) ) { ?>
 
 <a class="button" href="<?php the_sub_field('hero_cta_button_url') ?>"><?php the_sub_field('hero_button_text'); ?></a>
 
 <?php } else { ?>
 
 <!--no content--> <?php } ?>
 </div>
 </div>
 </div> 
 </div>
 </section> 
        <?php endif; ?>
 
 <?php // check current row layout ?>
        <?php if( get_row_layout() == 'text-image' ): ?>
 <section>
 
 <div class="text-image">
 <div class="text-left <?php the_sub_field('css_class')?>"><?php the_sub_field('left_text'); ?></div>
 <div class="image-right"><img src="<?php the_sub_field('right_image') ?>"/></div>
 </div>
 
 </section> 
        <?php endif; ?>
 
 <?php // check current row layout ?>
        <?php if( get_row_layout() == 'image-text' ): ?>
 <section>
 
 <div class="image-text">
 <div class="image-left"><img src="<?php the_sub_field('left_image') ?>"/></div>
 <div class="text-right <?php the_sub_field('css_class')?>"><?php the_sub_field('right_text'); ?></div>
 </div>
 
 </section> 
        <?php endif; ?>
 
 
    <?php endwhile; ?>
 
<?php else : ?>
    <?php // no layouts found ?>
<?php endif; ?>
</main>
<?php
}
get_header();
do_action('full_width_content');
get_footer();

Added to Style.CSS:

    .full_width_template .site_inner{
    max-width:100%;
    padding: 0;
}
/* Template for arty posts */
/* Section 1 -- Hero Section */ 
.hero {
 background-size: cover;
 position: relative;
 background-position: center;
}

.cta_container {
 text-align: center;
 vertical-align: middle;
 background-color: rgba(0, 0, 0, 0.52);
 background: rgba(0, 0, 0, 0.52);
 color:rgba(0, 0, 0, 0.52);
}
 
.cta_content {
 padding: 100px 10px;
 color: white;
}
.widget-area {
    display: none;
}
/* Section 2 & 3 -- Image Text -- Text Image*/
 
 .image-text,
 .text-image {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 }
 
.image-left,
.text-right,
.image-right,
.text-left {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
     justify-content: center;
 width: 50%;
}
 
.text-right,
.text-left {
 padding: 0 80px;
    vertical-align: middle;
}
 
.dark {
 background: #000;
 color: white;
}

The page I need help with: [log in to see the link]