WordPress posts in the loop not stacking side by side


I was following a wp theme developement tutorial but somehow the posts from main loop and projects are not showing side by side ..although all other css works fine here is my code

front-page.php

<?php get_header();?>      <div id="banner">         <h1>&lt;GTCoding/&gt;</h1>         <h3>Learn coding from scratch</h3>     </div>      <main>         <a href="<?php echo site_url('/blog');?>">             <h2 class="section-heading">All Blogs</h2>         </a>        <?php         $  args =  array(          'post_type' => 'post',          'posts_per_page' => 2         );         $  blogposts = new WP_Query($  args);          while($  blogposts->have_posts()){             $  blogposts->the_post();        ?>         <section>             <div class="card">                 <div class="card-image">                     <a href="<?php echo the_permalink(); ?>">                         <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">                     </a>                 </div>                  <div class="card-description">                     <a href="<?php echo the_permalink(); ?>">                         <h3><?php the_title(); ?></h3>                     </a>                     <p>                        <?php echo wp_trim_words(get_the_excerpt(),30); ?>                     </p>                     <a href="<?php echo the_permalink(); ?>" class="btn-readmore">Read more</a>                 </div>             </div>           <?php }              wp_reset_query();            ?>          </section>          <a href="<?php echo site_url('/projects');?>">             <h2 class="section-heading">All Projects</h2>         </a>          <?php         $  args =  array(          'post_type' => 'project',          'posts_per_page' => 2         );         $  projects = new WP_Query($  args);          while($  projects->have_posts()){             $  projects->the_post();        ?>         <section>             <div class="card">                 <div class="card-image">                     <a href="<?php echo the_permalink(); ?>">                         <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">                     </a>                 </div>                  <div class="card-description">                     <a href="<?php echo the_permalink(); ?>">                         <h3><?php the_title(); ?></h3>                     </a>                     <p>                        <?php echo wp_trim_words(get_the_excerpt(),30); ?>                     </p>                     <a href="<?php echo the_permalink(); ?>" class="btn-readmore">Read more</a>                 </div>             </div>           <?php }              wp_reset_query();            ?>          </section>          <h2 class="section-heading">Source Code</h2>          <section id="section-source">             <p>                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum neque qui delectus ad dolor blanditiis perferendis praesentium                 consectetur aut sed provident obcaecati aspernatur perspiciatis, dolores nobis pariatur ipsum vel corrupti!             </p>             <a href="#" class="btn-readmore">GitHub Profile</a>         </section>        <?php get_footer();?> 

header.php

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>GTCoding</title>     <?php wp_head(); ?> </head>  <body>     <div id="slideout-menu">         <ul>             <li>                 <a href="<?php echo site_url('');?>">Home</a>             </li>             <li>                 <a href="<?php echo site_url('/blog');?>">Blog</a>             </li>             <li>                 <a href="<?php echo site_url('/projects');?>">Projects</a>             </li>             <li>                 <a href="<?php echo site_url('/about');?>">About</a>             </li>             <li>                 <input type="text" placeholder="Search Here">             </li>         </ul>     </div>      <nav>         <div id="logo-img">             <a href="#">                 <img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="GTCoding Logo">             </a>         </div>         <div id="menu-icon">             <i class="fas fa-bars"></i>         </div>         <ul>             <li>                 <a class="active" href="<?php echo site_url('');?>">Home</a>             </li>             <li>                 <a href="<?php echo site_url('/blog');?>">Blog</a>             </li>             <li>                 <a href="<?php echo site_url('/projects');?>">Projects</a>             </li>             <li>                 <a href="<?php echo site_url('/about');?>">About</a>             </li>             <li>                 <div id="search-icon">                     <i class="fas fa-search"></i>                 </div>             </li>         </ul>     </nav>      <div id="searchbox">         <input type="text" placeholder="Search Here">     </div> 

footer.php

  <footer>             <div id="left-footer">                 <h3>Quick Links</h3>                 <p>                     <ul>                         <li>                             <a href="index.html">Home</a>                         </li>                         <li>                             <a href="about.html">About</a>                         </li>                         <li>                             <a href="#">Privacy Policy</a>                         </li>                         <li>                             <a href="blogslist.html">Blogs</a>                         </li>                         <li>                             <a href="blogslist.html">Projects</a>                         </li>                         <li>                             <a href="#">Contact</a>                         </li>                     </ul>                 </p>             </div>              <div id="right-footer">                 <h3>Follow us on</h3>                 <div id="social-media-footer">                     <ul>                         <li>                             <a href="#">                                 <i class="fab fa-facebook"></i>                             </a>                         </li>                         <li>                             <a href="#">                                 <i class="fab fa-youtube"></i>                             </a>                         </li>                         <li>                             <a href="#">                                 <i class="fab fa-github"></i>                             </a>                         </li>                     </ul>                 </div>                 <p>This website is developed by GTCoding</p>             </div>         </footer>      </main>   <?php wp_footer();?> </body>  </html> 

enter image description here

it should show like this

enter image description here

here is my index.html code

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"         crossorigin="anonymous">     <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab" rel="stylesheet">     <link rel="stylesheet" href="style.css">     <title>GTCoding</title> </head>  <body>     <div id="slideout-menu">         <ul>             <li>                 <a href="index.html">Home</a>             </li>             <li>                 <a href="blogslist.html">Blog</a>             </li>             <li>                 <a href="blogslist.html">Projects</a>             </li>             <li>                 <a href="about.html">About</a>             </li>             <li>                 <input type="text" placeholder="Search Here">             </li>         </ul>     </div>      <nav>         <div id="logo-img">             <a href="#">                 <img src="img/logo.png" alt="GTCoding Logo">             </a>         </div>         <div id="menu-icon">             <i class="fas fa-bars"></i>         </div>         <ul>             <li>                 <a class="active" href="index.html">Home</a>             </li>             <li>                 <a href="blogslist.html">Blog</a>             </li>             <li>                 <a href="blogslist.html">Projects</a>             </li>             <li>                 <a href="about.html">About</a>             </li>             <li>                 <div id="search-icon">                     <i class="fas fa-search"></i>                 </div>             </li>         </ul>     </nav>      <div id="searchbox">         <input type="text" placeholder="Search Here">     </div>      <div id="banner">         <h1>&lt;GTCoding/&gt;</h1>         <h3>Learn coding from scratch</h3>     </div>      <main>         <a href="blogslist.html">             <h2 class="section-heading">All Blogs</h2>         </a>          <section>             <div class="card">                 <div class="card-image">                     <a href="blogpost.html">                         <img src="img/1.jpg" alt="Card Image">                     </a>                 </div>                  <div class="card-description">                     <a href="blogpost.html">                         <h3>The Blog Title Here</h3>                     </a>                     <p>                         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora                         cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.                     </p>                     <a href="blogpost.html" class="btn-readmore">Read more</a>                 </div>             </div>              <div class="card">                 <div class="card-image">                     <a href="blogpost.html">                         <img src="img/2.jpg" alt="Card Image">                     </a>                 </div>                  <div class="card-description">                     <a href="blogpost.html">                         <h3>The Blog Title Here</h3>                     </a>                     <p>                         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora                         cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.                     </p>                     <a href="blogpost.html" class="btn-readmore">Read more</a>                 </div>             </div>         </section>          <a href="blogslist.html">             <h2 class="section-heading">All Projects</h2>         </a>          <section>             <div class="card">                 <div class="card-image">                     <a href="blogpost.html">                         <img src="img/3.jpg" alt="Card Image">                     </a>                 </div>                  <div class="card-description">                     <a href="blogpost.html">                         <h3>The Project Title Here</h3>                     </a>                     <p>                         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora                         cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.                     </p>                     <a href="blogpost.html" class="btn-readmore">Read more</a>                 </div>             </div>              <div class="card">                 <div class="card-image">                     <a href="blogpost.html">                         <img src="img/4.jpg" alt="Card Image">                     </a>                 </div>                  <div class="card-description">                     <a href="blogpost.html">                         <h3>The Project Title Here</h3>                     </a>                     <p>                         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora                         cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.                     </p>                     <a href="blogpost.html" class="btn-readmore">Read more</a>                 </div>             </div>         </section>          <h2 class="section-heading">Source Code</h2>          <section id="section-source">             <p>                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum neque qui delectus ad dolor blanditiis perferendis praesentium                 consectetur aut sed provident obcaecati aspernatur perspiciatis, dolores nobis pariatur ipsum vel corrupti!             </p>             <a href="#" class="btn-readmore">GitHub Profile</a>         </section>          <footer>             <div id="left-footer">                 <h3>Quick Links</h3>                 <p>                     <ul>                         <li>                             <a href="index.html">Home</a>                         </li>                         <li>                             <a href="about.html">About</a>                         </li>                         <li>                             <a href="#">Privacy Policy</a>                         </li>                         <li>                             <a href="blogslist.html">Blogs</a>                         </li>                         <li>                             <a href="blogslist.html">Projects</a>                         </li>                         <li>                             <a href="#">Contact</a>                         </li>                     </ul>                 </p>             </div>              <div id="right-footer">                 <h3>Follow us on</h3>                 <div id="social-media-footer">                     <ul>                         <li>                             <a href="#">                                 <i class="fab fa-facebook"></i>                             </a>                         </li>                         <li>                             <a href="#">                                 <i class="fab fa-youtube"></i>                             </a>                         </li>                         <li>                             <a href="#">                                 <i class="fab fa-github"></i>                             </a>                         </li>                     </ul>                 </div>                 <p>This website is developed by GTCoding</p>             </div>         </footer>      </main>      <script src="main.js"></script> </body>  </html>