title: Add space in between images
body: <p>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?</p>
  
  <p>what it looks like...
  <a href="https://i.stack.imgur.com/TI1NB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TI1NB.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article &lt;?php post_class( 'col-md-4' ); ?&gt;&gt;
                  &lt;div class="front-thumbnail-image"&gt;&lt;?php the_post_thumbnail('full', array('class' =&gt; 'medium-front-thumbnail')); ?&gt;&lt;/div&gt;&lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>.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;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>my entire front-page.php</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  /*
   * Template Name:
   */
  
  get_header();
  get_template_part ('inc/carousel');
  
  $the_query = new WP_Query( [
      'posts_per_page' =&gt; 14,
      'paged' =&gt; get_query_var('paged', 1)
  ] );
  
  if ( $the_query-&gt;have_posts() ) { ?&gt;
      &lt;div id="ajax"&gt;
      &lt;?php
      $i = 0;
      while ( $the_query-&gt;have_posts() ) { $the_query-&gt;the_post();
  
          if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?&gt;
          &lt;article &lt;?php post_class( 'col-md-12' ); ?&gt;&gt;
              &lt;div class="large-front-container"&gt;
  &lt;?php the_post_thumbnail('full', array('class' =&gt; 'large-front-thumbnail')); ?&gt;
                  &lt;/div&gt;
              &lt;h2&gt;&lt;a class="post-title" href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
              &lt;p class="front-page-post-excerpt"&gt;&lt;?php echo get_the_excerpt(); ?&gt;&lt;/p&gt;
              &lt;div class="front-post-info"&gt;
              &lt;a class="moretext" href="&lt;?php the_permalink(); ?&gt;"&gt;Read more&lt;/a&gt;
                  &lt;?php get_template_part ('front-page-shop'); ?&gt;
                                   &lt;?php get_template_part( 'share-buttons' ); ?&gt;
                  &lt;div class="front-comments"&gt;&lt;?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?&gt;&lt;/div&gt;
              &lt;/article&gt;&lt;?php
  
          } else { // Small posts ?&gt;
  
              &lt;article &lt;?php post_class( 'col-md-4' ); ?&gt;&gt;
                  &lt;div class="front-thumbnail-image"&gt;&lt;?php the_post_thumbnail('full', array('class' =&gt; 'medium-front-thumbnail')); ?&gt;&lt;/div&gt;
                  &lt;a class="front-page-post-title" href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;
                  &lt;p class="front-page-post-excerpt"&gt;&lt;?php echo get_the_excerpt(); ?&gt;&lt;/p&gt;
                  &lt;a class="moretext" href="&lt;?php the_permalink(); ?&gt;"&gt;Read more&lt;/a&gt;
                  &lt;?php get_template_part ('front-page-shop'); ?&gt;
                                   &lt;?php get_template_part( 'share-buttons' ); ?&gt;
                  &lt;div class="front-comments"&gt;&lt;?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?&gt;&lt;/div&gt;
              &lt;/article&gt;
              &lt;?php
          }
          $i++;
      }?&gt;
      &lt;/div&gt;
      &lt;?php if(get_query_var('paged') &lt; $the_query-&gt;max_num_pages) {
         load_more_button();
      }
  }
  elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
      echo '&lt;p&gt;Sorry, no posts matched your criteria.&lt;/p&gt;';
  }
  wp_reset_postdata();
  get_footer();</code></pre>
  </div>
  </div>
  </p>