wordpressでasideにcssが反映されない。

Question

htmlとCSSでコーディング
⇩
wordpress化
⇩
サーバーアップ

wordpressでasideにスタイルが当たらず困っています。
functions.phpは以下です。

<?php 
add_theme_support('post-thumbnails');

if (!is_admin()) {

  wp_enqueue_style(
  'reset-css',
  get_template_directory_uri() . '/reset.css',
  );

  wp_enqueue_style(
  'main-style',
  get_template_directory_uri() . '/style.css',
  );

  add_action( 'wp_enqueue_scripts', 'add_google_fonts' );
  function add_google_fonts() {
    wp_enqueue_style( ' add_google_fonts ', 'https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap', false );
    wp_enqueue_style( ' add_google_fonts ', 'https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&display=swap', false );
  }

  wp_enqueue_script(
  'jquery',
  'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
  array(),
  false,
  true
  );

  wp_enqueue_script(
  'main-script',
  get_template_directory_uri() . '/js/main.js',
  array('jquery'),
  false,
  true
  );

  function create_post_type() {
  register_post_type('news', [
    'labels' => [
      // 管理画面上で表示する投稿タイプ名
      'name' => 'ニュース',
      // 管理画面などで表示する名前（単数形）
      'singular_name' => 'ニュース',
    ],
    // パブリック設定（基本的にtrueにしておく）
    'public' => true,
    // アーカイブを有効にする
    'has_archive' => true,
  ]);
  }

}
  function add_image_class( $classes ) {
  return $classes . ' card-img';
  }
  add_filter('get_image_tag_class', 'add_image_class');

  function pagenation($pages = '', $range = 2){
    $showitems = ($range * 1)+1;
    global $paged;
    if(empty($paged)) $paged = 1;
    if($pages == ''){
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages){
            $pages = 1;
        }
    }

}

?>

index.phpは以下です。

<?php get_header(); ?>

 <!-- <div id="loading">
    <div class="loading-main">
      <p class="loading-right">Yorigurume</p>
      <p class="loading-left">Dericious to you</p>
    </div>
  </div> -->

<div id="navArea">
    <nav>
      <div class="inner">
        <ul>
          <li><a href="<?php echo home_url(); ?>">ホーム</a></li>
          <li><a href="category.html">カテゴリー</a></li>
          <li><a href="personal.html">作成者について</a></li>
          <li><a href="single.html">お問い合わせ</a></li>
          <li><a href="<?php the_permalink(); ?>https://www.instagram.com/ike_mawari_09/?hl=ja" target="_blank">Yorigurumeとは？</a></li>
        </ul>
      </div>
    </nav>
    <div class="toggle_btn">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div id="mask"></div>
  </div>


<div class="container flex">
    <main class="flex">

  <?php
  if(have_posts()) :
    while(have_posts()) :
      the_post();
  ?>

    <div class="card-left">
      <div class="img-box">
        <a href="single.html">
        <!-- <picture>
          <source media="(max-width: 560px)" srcset="./img/resize/araticle-img/kichen-check-dish.jpg">
          <source media="(min-width: 960px)" sizes="50vw" srcset="./img/tinified/kichen-check-dish.jpg">
          <img src="./img/tinified/kichen-check-dish.jpg" alt="カードの写真" class="card-img" width="250px">
        </picture> -->
          <?php the_post_thumbnail(); ?>
        </a>
      </div>
      <h3 class="card-ttl"><?php the_title(); ?></h3>
      <p class="card-txt"><?php the_content(); ?></p>
    </div>

    <div class="card-center">
      <div class="img-box">
        <a href="">
        <!-- <picture>
          <source media="(max-width: 560px)" srcset="./img/resize/araticle-img/kichen-check-dish.jpg">
          <source media="(min-width: 960px)" sizes="50vw" srcset="./img/tinified/kichen-check-dish.jpg">
          <img src="./img/tinified/kichen-check-dish.jpg" alt="カードの写真" class="card-img" width="250px">
        </picture> -->
          <?php the_post_thumbnail(); ?>
        </a>
      </div>
      <h3 class="card-ttl"><?php the_title(); ?></h3>
      <p class="card-txt"><?php the_content(); ?></p>
    </div>

    <div class="card-right">
      <div class="img-box">
        <a href="single.html">
        <!-- <picture>
          <source media="(max-width: 560px)" srcset="./img/resize/araticle-img/kichen-check-dish.jpg">
          <source media="(min-width: 960px)" sizes="50vw" srcset="./img/tinified/kichen-check-dish.jpg">
          <img src="./img/tinified/kichen-check-dish.jpg" alt="カードの写真" class="card-img" width="250px">
        </picture> -->
          <?php the_post_thumbnail(); ?>
        </a>
      </div>
      <h3 class="card-ttl"><?php the_title(); ?></h3>
      <p class="card-txt"><?php the_content(); ?></p>
    </div>

  <?php
    endwhile;
  else:
  ?>
  <p>お探しの記事はありませんでした。</p>
  <?php endif; ?>
      
  </main>

    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>