【WordPress】既存テーマのカスタマイズ：レイアウトの編集をしたいです。

Question

この度、Wordpressのテーマをベースにウェブサイトを制作中です。

こちらのテーマを使用しております。
https://demo.raratheme.com/preschool-and-kindergarten/

現在直面している問題は、「Featured Programs」セクションと「Our Staffs」セクションのレイアウトに関してです。
Wordpressのカスタマイズ画面でポストを選ぶと自動的にレイアウトに組み込んでもらえるのですが、デモサイトのように３つの投稿ではなく２つの場合、左揃えで右に１つ分のアキができてしまい、バランスが悪くなってしまいます。

そこで、２つの投稿用に中央揃えにレイアウトを編集できればと思っております。

当方はhtmlは少しだけわかりますが、PHPの方は全くの初心者です。
上記のようなカスタマイズが可能かどうか（その場合はその方法）をご教授いただけますと幸いです。

以下に関連しそうなコードを載せます。
style.css に関しては、.row や webkit-box-sizing が関係しているのかと思い色々試してみましたがわかりませんでした…。

どうぞよろしくお願いいたします。

［Program Section の PHP］

<?php
/**
 * Program Section
 * 
 * @package Preschool_and_Kindergarten
*/ 
      $title       = get_theme_mod('preschool_and_kindergarten_program_section_title');
      $description = get_theme_mod('preschool_and_kindergarten_program_section_description');
            
      $program_post_one   = get_theme_mod('preschool_and_kindergarten_program_post_one');
      $program_post_two   = get_theme_mod('preschool_and_kindergarten_program_post_two');
      $program_post_three = get_theme_mod('preschool_and_kindergarten_program_post_three');
             
      $program_post = array( $program_post_one, $program_post_two, $program_post_three );
      $program_post = array_diff( array_unique( $program_post ), array('') );
?>
    <section class="featured">
		<div class="container">
		    <?php 
		    preschool_and_kindergarten_get_section_header($title, $description ); 
            
            if( $program_post ):

		        $program_qry = new WP_Query(array(
			    	 
			    	 'post__in'   => $program_post,
	                 'orderby'   => 'post__in',
	                 'posts_per_page' => -1,
	                 'ignore_sticky_posts' => true

		    	));

			    if($program_qry->have_posts()){ ?>
				
					<div class="row">
					
					    <?php 
					    while($program_qry->have_posts()){ $program_qry->the_post() ?>
						
							<div class="col">
								<div class="holder">
							
								    <?php
								    if(has_post_thumbnail()){ ?>
										<div class="img-holder">
											<?php the_post_thumbnail('preschool-and-kindergarten-program-thumb', array( 'itemprop' => 'image' ) ); ?>
										</div>
								    <?php 
								    } ?>

									<div class="text-holder">
										<h3 class="title"><?php the_title(); ?></h3>
										<?php  the_excerpt(); ?>
										<a href="<?php the_permalink(); ?>" class="btn-detail"><?php esc_html_e('View Details','preschool-and-kindergarten');?></a>
									</div>
								
								</div>
							</div>

					    <?php 
					    } ?>
					
				    </div>
				
				<?php } 
				
				wp_reset_postdata(); 
				
		    endif ?>
		</div>
	</section>

［Program Section の Style.css］

/*featured section stlyle*/
.featured {
    background: #f9f9f9;
    padding: 70px 0;
    text-align: center;
}

.featured .header {
    font-size: 21px;
    line-height: 32px;
    margin: 0 auto 90px;
    max-width: 780px;
}

.featured .header .title {
    color: #006CD9;
    font-size: 33px;
    font-weight: 400;
    line-height: 48px;
    margin: 0 0 21px;
}

.featured .col {
    float: left;
    width: 33.3333%;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
}

.featured .col .holder {
    background: #fff;
    padding: 0 40px 50px;
}

.featured .col .img-holder {
    margin: 0 0 33px;
}

.featured .col .img-holder img {
    vertical-align: top;
    -webkit-border-radius: 100px;
    border-radius: 50%;
    border: 10px solid #fff;
    margin: -45px 0 0;
}

.featured .col .text-holder {
    /*padding: 0 40px;*/
}

.featured .col .text-holder .title {
    color: #313131;
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    margin: 0 0 18px;
}

.featured .col .text-holder .btn-detail {
    border: 2px solid #006CD9;
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    padding: 11px 10px 12px;
    text-transform: uppercase;
}

.featured .col .text-holder .btn-detail:hover,
.featured .col .text-holder .btn-detail:focus {
    text-decoration: none;
    background: #006CD9;
    color: #fff;

Answer 1

.featured .row {
    display: flex;
    justify-content: center;
}

Comments

[hahp]

解決しました！
迅速にご回答いただき誠にありがとうございました。