How to change image size on featured images in wordpress?

I thought I had it all figured out, when of course, the code doesn’t work. Not sure what I’m doing wrong or how to fix it. I just want to be able to define image sizes in my functions.php file and call them whenever I want from my index.php or single.php. (Excuse all of the comments in the code. I’m following a tutorial trying to learn wordpress and the tutorial doesn’t cover the issue of “what if it doesn’t work”) So currently, the image I’m playing with is 1360×582 and it will resize based on my css, but not according to the functions when I apply them. Any help would be great!

My index.php looks like this:

    <?php

get_header();

if (have_posts()) :
    while (have_posts()) : the_post(); ?>

    <article class="post">
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p class="post-info"><?php the_time('F jS, Y'); ?> | by <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a> | Posted in
            <?php 
            $categories = get_the_category();
            $separator = ", ";
            $output = '';

            if ($categories){

                foreach ($categories as $category) {
                    $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
                }

                echo trim($output, $separator); //trim() removes comma from last item//
            }
            ?></p>  

            <?php the_post_thumbnail('small_thumbnail'); ?> <!--featured image-->

<!-- if you want an excerpt to be displayed only if one is manually entered, otherwise show full post:

        <?php if ($post->post_excerpt) { ?>

        <P>
            <?php echo get_the_excerpt(); ?> 
            <a href="<?php the_permalink(); ?>">Read more&raquo;</a>
        </p>

        <?php } else {

            the_content();

        } ?>

-->

        <P>
            <?php echo get_the_excerpt(); ?> 
            <a href="<?php the_permalink(); ?>">Read more&raquo;</a>
        </p>
        <!-- <?php the_content('Read More...'); ?> -->
    </article>

    <?php endwhile;

    else :
        echo '<p>No content found</p>';
endif;

get_footer();

?>

functions.php:

//Theme Setup

function Theme_setup() {

    //Navigation Menus
    register_nav_menus(array(
    'primary' => __( 'Primary Menu'),
    'footer' => __( 'Footer Menu'),
    ));

    //Add Feature Image Support
    add_theme_support('post-thumbnails');
    add_image_size('small-thumbnail', 180, 120, true); //width, height, hard (true) or soft crop
    add_image_size('banner-image', 920, 210, true);

}

add_action('after_setup_theme', 'Theme_setup');

and my single.php looks pretty much the same as my index.php at the moment except that it uses the ‘banner-image’ on the featured image rather than the ‘small-thumnail’

the css I have applied to images is this:

/* Image Styles */

img {
    max-width: 100%;
    height: auto;
}