Kann Rand rechts in einer Reihe von Beiträgen nicht hinzufügen

Question

Im Moment habe ich 3 Beiträge in einer Reihe, 3 Beiträge in der nächsten Zeile und 1 Beitrag in der nächsten Zeile, und so weiter. Ich versuche, zwischen den Posts, die 3 in einer Reihe haben, Platz hinzuzufügen. Jedes mal wenn ich css margin-right: 25px; zu .col-mod-4 {es fügt den Platz hinzu, aber 1 Beitrag wird von der Reihe gestrichen, und stattdessen habe ich 3 Reihen von 2 Pfosten. Hat jemand irgendwelche Lösungen? (Ich habe ein Dropbox-Link mit Screenshots des Problems angebracht)

https://www.dropbox.com/sh/fbi17l2ortzpqkk/AACDm2XIcvJDjouAb0zPilfVa?dl=0

Hier ist meine index.php

<?php 
 
/* 
 
* Template Name: learningwordpress 
 
*/ 
 
    
 
get_header(); 
 
    
 
$i = 0; 
 
    
 
$args = array(
 
    'posts_per_page' => 14, 
 
    'paged' => 1 
 
); 
 
    
 
$the_query = new WP_Query($args); 
 
    
 
if ($the_query->have_posts()) { 
 
    while ($the_query->have_posts()) { 
 
    
 
     if($i %2 == 1) { 
 
        $the_query->the_post(); ?> 
 
      <article class="post col-md-4"> 
 
       <?php the_post_thumbnail('medium-thumbnail'); ?> 
 
       <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
       <p> 
 
        <?php echo get_the_excerpt(); ?> 
 
        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
       </p> 
 
      </article>  
 
      <?php $the_query->the_post(); ?> 
 
      <article class="post col-md-4"> 
 
       <?php the_post_thumbnail('medium-thumbnail'); ?> 
 
       <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
       <p> 
 
        <?php echo get_the_excerpt(); ?> 
 
        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
       </p> 
 
      </article> 
 
<?php $the_query->the_post(); ?> 
 
      <article class="post col-md-4"> 
 
       <?php the_post_thumbnail('medium-thumbnail'); ?> 
 
       <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
       <p> 
 
        <?php echo get_the_excerpt(); ?> 
 
        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
       </p> 
 
      </article> 
 

 
<?php $the_query->the_post(); ?> 
 
      <article class="post col-md-4"> 
 
       <?php the_post_thumbnail('medium-thumbnail'); ?> 
 
       <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
       <p> 
 
        <?php echo get_the_excerpt(); ?> 
 
        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
       </p> 
 
      </article>  
 
      <?php $the_query->the_post(); ?> 
 
      <article class="post col-md-4"> 
 
       <?php the_post_thumbnail('medium-thumbnail'); ?> 
 
       <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
       <p> 
 
        <?php echo get_the_excerpt(); ?> 
 
        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
       </p> 
 
      </article> 
 
<?php $the_query->the_post(); ?> 
 
      <article class="post col-md-4"> 
 
       <?php the_post_thumbnail('medium-thumbnail'); ?> 
 
       <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
       <p> 
 
        <?php echo get_the_excerpt(); ?> 
 
        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
       </p> 
 
      </article> 
 
      <?php 
 

 
     } 
 
     else { 
 
     $the_query->the_post(); ?> 
 
      <article class="post col-md-12"> 
 
       <?php the_post_thumbnail('large-thumbnail'); ?> 
 
       <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
       <p> 
 
        <?php echo get_the_excerpt(); ?> 
 
        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
       </p> 
 
      </article> 
 
      <?php 
 
     } 
 
     ?> 
 
     <?php 
 
     $i++; 
 
    } 
 
} 
 
else { 
 
    echo '<p>Sorry, no posts matched your criteria.</p>'; 
 
} 
 
get_footer();

Answer 1

Try padding-right statt margin-right