Here’s a bit more info on making galleries responsive and dealing with spacing. Spacing can be a puzzle if you want gaps between columns but you’d still like the outer edges to fit your container.

Here’s some sample CSS that does the job:

.gallery {
width: 101%;
overflow: hidden;
}

.gallery-item {
text-align:center;
padding: 0;
margin:0 1% 10px 0;
}

.gallery-columns-1 .gallery-item {
width: 99%;
}

.gallery-columns-2 .gallery-item {
width: 49%;
}

.gallery-columns-3 .gallery-item {
width: 32.33%;
}

.gallery-columns-4 .gallery-item {
width: 24%;
}

.gallery-columns-5 .gallery-item {
width: 19%;
}

@media only screen and ( min-width: 641px ) and ( max-width: 960px )
{
.gallery-item { width: 32.33% !important;}
}

@media only screen and ( min-width: 361px ) and ( max-width: 640px )
{
.gallery-item { width: 49% !important}
}

@media only screen and ( max-width: 360px )
{
.gallery-item { width: 99% !important;}
}

Margin is applied to the right of each item and adjusted to suit the screen width. Adding this margin to the overall gallery width allows the right-hand column to fit up to the edge of the container.

Since we’re trampling all over the native gallery it’s probably a good idea to disable the native styles and set the image size by adding this snippet to functions.php:

// remove gallery styles & shortcode
add_filter( 'use_default_gallery_style', '__return_false' );
remove_shortcode('gallery');
add_shortcode('gallery', 'custom_size_gallery');
// force gallery size 
function custom_size_gallery($attr) {
 $attr['size'] = 'medium';
 return gallery_shortcode($attr);
}