Automatically resize images in grid to fit screen width - remove right side white space

I'm creating an image grid in a wordpress page to display posts as thumbnails in a grid. I already have them displayed in a grid but every option I have tried creates excess whitespace in the right side. The images are moved to the next line rather than resize to fit the width.

This is the grid on my index page:

<div id="grid">
                    <div class="container-fluid">
                        <div class="row">
                            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                                <a href ="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php echo get_the_post_thumbnail( $thumbnail->ID, 'large' ); ?></a>
                            <?php endwhile; else : ?>
                                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
                            <?php endif; wp_reset_query(); ?>
                        </div>
                    </div>
                </div>

The only specific CSS I used is 5px of padding on the images.

.attachment-large {
padding: 5px !important;
}

I have set my large thumbnail sizes to max-width: 400 and max-height: 230. This makes all images equal in height but still leaves the white space to the right in the columns.

I have installed and activated jQuery Masonry Image Gallery plugin. It provides the grid but still leaves the space. I tried with another Masonry plugin but it did the same thing.

Do you know how to get rid of the space?