Footer occasionally and randomly moving to right s

Question

Just wondered if anyone has ever experienced this, sometimes when viewing a page that i've just edited, the footer (which consists of multiple stacked divs) turns itself into columns and appears at the right of my screen, squashing my page content. Sometimes this happens after I've entered faulty code (for example, a '>' instead of a '<'), which is fair enough, but sometimes I just want to change the format of a featured image in my CSS and it does it then too.

I've tried clearing my cache. This error is consistent and appears every time I run certain code, it's just very random what kind of code creates the error.

Has anyone else experienced this?

EDIT: here is my footer.php code, which has worked perfectly for weeks up until today, would not know what other code would be relevant:

    <div class="personeel group">
        <div class="container group">
            <?php echo do_shortcode("[insert page='accountmanagers']"); ?>   
        </div>
    </div>
    <div class="nieuws group">
        <div class="container">
            <?php echo do_shortcode("[insert page='nieuws-front-page']"); ?> 
        </div>
    </div>
    <footer class="group">
        <div class="container">
            <div class="row">
                <section class="col-lg-4 col-md-4 col-sm-12"> 
                    <div class="sectie first">
                        <h3>Over ons</h3>
                        <div class="row">
                            <section class="col-xs-12 col-sm-6"> 
                                <div class="kolom">
                                    <ul>
                                        <li>Over Match</li>
                                        <li>Accountmanagers</li>
                                        <li>Vormen van bemiddeling</li>
                                        <li>Kwaliteit</li>
                                    </ul>
                                </div>
                            </section>
                            <section class="col-xs-12 col-sm-6">
                                <div class="kolom">
                                    <ul>
                                        <li>Branches</li>
                                        <li>Certicering</li>
                                        <li>Match holding</li>
                                        <li>Contact</li>
                                    </ul>
                                </div>
                            </section>
                        </div>
                    </div>
                </section>
                <section class="col-lg-4 col-md-4 col-sm-12"> 
                    <div class="sectie second">
                        <h3>Bedrijven</h3>
                        <ul>
                            <li>Arbeidskrachten</li>
                            <li>Vacature plaatsen</li>
                            <li>Vormen van bemiddeling</li>
                        </ul>
                    </div>
                </section>
                <section class="col-lg-4 col-md-4 col-sm-12"> 
                    <div class="sectie third">
                        <h3>Baan zoeken</h3>
                        <div class="row">
                            <section class="col-xs-12 col-sm-6"> 
                                <div class="kolom">
                                    <ul>
                                        <li>Vacatures</li>
                                        <li>Inschrijven</li>
                                        <li>Werken bij Match</li>
                                        <li>Snel aan de slag</li>
                                    </ul>
                                </div>
                            </section>
                            <section class="col-xs-12 col-sm-6"> 
                                <div class="kolom">
                                    <ul>
                                        <li>Vormen van bemiddeling</li>
                                        <li>CV uploaden</li>
                                    </ul>
                                </div>
                            </section>
                        </div>
                    </div>
                </section>
            </div>
        </div>            
    </footer>
    <div class="copyright">
        <p>Copyright 2017 - Match | Sitemap | Webdesign One Squad</p>
    </div>
</div>

<?php wp_footer(); ?>

single-jobpost.php (plugin template, error occurs):

<?php
/**
 * The Template for displaying job details
 *
 * Override this template by copying it to yourtheme/simple_job_board/single-jobpost.php
 *
 * @author      PressTigers
 * @package     Simple_Job_Board
 * @subpackage  Simple_Job_Board/Templates
 * @version     1.1.0
 * @since       2.2.0
 * @since       2.2.3   Enqueued Front Styles & Revised the HTML structure.
 * @since       2.2.4   Enqueued Front end Scripts.
 * @since       2.3.0   Added "sjb_archive_template" filter.
 */
get_header();

ob_start();
global $post;

/**
 * Enqueue Frontend Scripts.
 * 
 * @since   2.2.4
 */
do_action('sjb_enqueue_scripts');

/**
 * Hook -> sjb_before_main_content
 * 
 * @hooked sjb_job_listing_wrapper_start - 10 
 * - Output Opening div of Main Container.
 * - Output Opening div of Content Area.
 * 
 * @since   2.2.0
 * @since   2.2.3   Removed the content wrapper opening div.
 */
do_action('sjb_before_main_content');
?>

<!-- Start Content Wrapper
================================================== -->
<div class="sjb-page">
    <div class="sjb-detail">
        <div class="list-data">
            <?php
            while ( have_posts() ) : the_post();
                /**
                 * Template -> Content Single Job Listing:
                 * 
                 * - Company Meta
                 * - Job Description 
                 * - Job Features
                 * - Job Application Form
                 */
                get_simple_job_board_template('content-single-job-listing.php');
            endwhile;
            ?>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- ==================================================
End Content Wrapper -->

<?php
/**
 * Hook -> sjb_after_main_content
 *  
 * @hokoed sjb_job_listing_wrapper_end - 10
 * 
 * - Output Closing div of Main Container.
 * - Output Closing div of Content Area.
 * 
 * @since   2.2.0
 * @since   2.2.3   Removed the content wrapper closing div
 */
do_action('sjb_after_main_content');

$html_archive = ob_get_clean();

/**
 * Modify the Jobs Archive Page Template. 
 *                                       
 * @since   2.3.0
 * 
 * @param   html    $html_archive   Jobs Archive Page HTML.                   
 */
echo apply_filters('sjb_single_template', $html_archive);

get_footer();

nieuws.php (my own template, error does not occur):

<?php
    /*
     Template Name: Nieuws-template
    */
?>
<?php get_header(); ?>
<div id="not-front-page" class="content">
    <img src = '<?php bloginfo('template_directory'); ?>/images/nieuwspagina-header.png' class="not-front-page-header" />
    <div class="container">
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <div class="post-header">
                    <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                </div><!--.post-header-->
                <div class="entry clear">
                    <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
                    <?php the_content(); ?>
                    <?php edit_post_link(); ?>
                    <?php wp_link_pages(); ?>
                </div><!--. entry-->
            </div><!-- .post-->
        <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
        <?php else : ?>
    <?php endif; ?>
    </div>
    <?php wp_footer(); // Crucial footer hook! ?>
<?php get_footer('front-page'); ?>

Answer 1

As I mentioned above it all seemed to have to do with

body {
   display: flex
}

Once I got rid of this the footer went back underneath. I had to use some workarounds to get my sidebar just right but it seems to be OK for now. Thanks :)