Shortcode is moving the_content outside of the article container in WordPress

I’ve made a shortcode function that returns some Advanced Custom Fields depending on which repeater field is chosen. It displays correctly and in the right order however any content typed underneath the shortcode is moved outside of its <article> container element.

Here is the code:

function boxes_shortcode($atts, $content = null) {

ob_start(); ?>

<div id="boxes">
    <div class="box-gutter"></div>
    <div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>

    <?php if(get_sub_field('box_type') == "box-link"): ?>
        <div class="box">
        <div class="link-box">
            <img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
            <a class="caption-wrapper" href="http://www.google.com">
            <span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
                <h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
                <h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
                <p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
            </span>
            </a>
        </div>
        </div>
    <?php endif;

    if(get_sub_field('box_type') == "box-quote"): ?>
        <div class="box">
        <div class="quote-box">
                <div class="quotation-mark"></div>
                <h4><?php the_sub_field('quote'); ?></h2>
                <p><?php the_sub_field('quote_source'); ?></p>
                <a href="<?php the_sub_field('quote_link_url'); ?>"><?php the_sub_field('quote_link_text'); ?> ></a>
        </div>
        </div>
    <?php endif;

    if(get_sub_field('box_type') == "box-twitter"): ?>
        <div class="box">
        <div class="twitter">
            <a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            <a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
            <div class="twitter-bottom"><a href="<?php the_sub_field('twitter_url'); ?>">See more ></a></div>
        </div>
        </div>
    <?php endif;
endwhile;?>
    </div>
    </div>
</div>
<?php 
/* Get the buffered content into a var */
$sc = ob_get_contents();

ob_end_clean();

return $sc;

}
add_shortcode('boxes', 'boxes_shortcode');

Can anyone help solve this mystery? Many thanks.