Add space in between images - php

Question

On my front page I have three posts in a row that are spread across the full width of the page. I want to add a padding of 30px to the left. However my problem is then that at the beginning of each row of images there is a padding of 30px. I want it so that technical there is only a padding to the left and right 30px of the middle image, so the outer two images are always touching the end of the screen. I tried using :first-child to then take away the padding, however since I have the posts in a loop it did not work, and removed padding from all three images. Does anyone have a solution?
what it looks like...
<article <?php post_class( 'col-md-4' ); ?>>
<div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div></article>
.medium-front-thumbnail {
max-width: 100%;
height: auto;
position: relative;
margin: 0 auto;
align-items: flex-end;
display: block;
float: left;
}
.front-thumbnail-image {
padding-left: 30px !important;
}
.col-md-4 {
padding: 0 0 0 0 !important;
margin-bottom: 100px;
background-color: red;
}
my entire front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<article <?php post_class( 'col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article><?php
} else { // Small posts ?>
<article <?php post_class( 'col-md-4' ); ?>>
<div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div>
<a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();

Answer 1

you can use :nth-child(2) to target the middle div.
.grid > div:nth-child(2) {
padding: 0 30px;
}
.grid > div {
float: left;
}
.grid {
background: red;
overflow: auto;
display: inline-block;
}
img {
display: block;
max-width: 100px;
}
<div class="grid">
<div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"></div>
<div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"></div>
<div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"></div>
</div>

Answer 2

On the code you've provided I can see you uses Flexbox. To the container of the images try to add justify-content: space-between. That should only add space between the images.
.front-thumbnail-image {
display: flex;
justify-content: space-between;
background: red;
}
<article class='col-md-4'>
<div class="front-thumbnail-image">
<img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" height="120" />
<img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" height="120" />
<img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" height="120" />
</div>
</article>

Answer 3

Try this :
.grid img:not(:first-child) , .grid img:not(:last-child) {
padding: 0 10px 0 10px;
}
Full code :
img {
width: 100px;
height: 100px;
}
.grid {
background-color: red;
display: inline-block;
}
.grid img:not(:first-child) , .grid img:not(:last-child) {
padding: 0 10px 0 10px;
}
<div class="grid">
<img src="http://cdn.earthporm.com/wp-content/uploads/2014/10/animal-family-portraits-2__880.jpg">
<img src="http://onehdwallpaper.com/wp-content/uploads/2015/07/Abdorble-Animals-Desktop-Wallpapers-Pictures.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/b2/1e/c9/b21ec91754d33bb5de86c67c45482e12.jpg">
<img src="http://cisnerosnediadistribution.s3.amazonaws.com/media/images/reino_animal_-_trailer_image.png">
</div>