Using pagination with wp-query ‘post_type’

I am having trouble getting pagination to work. I have read all the help but can’t seem to apply it very well.

Here’s a pastie for the page.

http://pastebin.com/L12bJ6Zn

I had a look at this, WordPress pagination issue with post_type(‘page’) but I could not see how he did it, perhaps I am missing somthing in my new Wp_Query,

The code commented out was another test I tried which did not work. I also tried the plugin
pagenavi which I could also not get to work.

<?php

/*

Template Name: News Page


*/


get_header(); ?>

<div class="container">
        <ol class="col-md-4 breadcrumb">
                <li><a href="<?php echo get_site_url(); ?>">Home</a></li>
                <li  class="active">News</li>
        </ol>
</div>
<?php
$args = array (
        'post_type' => 'news',
        'posts_per_page' => 2
        );

$the_query = new WP_Query( $args );
?>     

<?php
$posts =1;
?>

<div class="container news">

        <div class="col-md-3">

                <?php
                if ($posts == 1) {
                        global $wp_query;
                        $postid = $wp_query->post->ID;
                        get_post_meta($postid, 'title_youtube_link', true);
                        wp_reset_query();

                        echo '<h5>';
                        echo the_field('title_youtube_link');
                        echo'</h5>';

                        global $wp_query;
                        $postid = $wp_query->post->ID;
                        get_post_meta($postid, 'youtube_link', true);
                        wp_reset_query();

                        $meta = get_post_meta(get_the_ID(), 'video', true);
                        $content = apply_filters('the_content', get_field('youtube_link') );
                        echo $content;

                        the_content();
                        echo '<div style="padding-top: 35px;"></div>';
                        dynamic_sidebar('news_taxonomy');
                        echo '<div style="padding-bottom: 35px;"></div>';
                }
                $posts++; ?>
        </div>
        <div class=" col-md-8 col-md-offset-1">

                <script>
                        boxes = $('.news-height');
                        minHeight = Math.min.apply(
                                Math, boxes.map(function() {
                                        return $(this).height();
                                }).get());
                        boxes.height(minHeight);
                </script>

                <?php if ( have_posts() ) : while ( $the_query->have_posts()  ) : $the_query -> the_post(); ?>

                        <div class=" news-style well" >

                                <a href="<?php the_permalink(); ?>"><h4 class="bold_this"><?php the_field('title_of_the_news'); ?>&rarr;</h4></a>

                                <ul class="info">
                                        <li>Posted in: <?php echo get_the_term_list( $post->ID, 'news_type','',','); ?> </li>
                                        <li>Added by: <a href="<?php bloginfo('siteurl') ;?>/about/"><?php the_author(); ?></a></li>
                                        <li>On: <?php the_time('F j, Y'); ?></li>
                                </ul>
                                <br><br>
                                <?php the_field('content_of_the_news'); ?>
                        </div>
                <?php endwhile; endif; ?>

                 <!-- posts_nav_link(' — ', __('&laquo; Newer Posts'), __('Older Posts &raquo;'));  -->
                 <?php wp_pagenavi(); ?>

        </div>
</div>

<?php get_footer();?>