2 Column from WP_Query in CSS File

This is my first attempt at coding a custom page template. I have removed all the “stuff” and got down to the category just posting the way I want it. I am using Pinboard Theme and need to format this posting in two columns for content on one page. The rest of the site has a single content column formatting.

I believe the column formatting goes in the style.css file in the child theme folder. I get the posting data I need in a single column but are unable to format the page with two columns. Here is the codes I am using for the page template file and style.css file:
Custom Page Template

<?php
/*
Template Name: Inspiration Gallery
*/
?>
            <style type="text-css">
            img {
                width: 330px;
                height: auto;
                margin-bottom: 0;
            }
            </style>

<!-- the query -->
           <?php $wp_query = new WP_Query( 'cat=12' ); ?>

<div class="col-content">
          <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

              <div id="left-column">
                  <?php the_content(); ?>
              </div>

              <?php endif; endwhile; else: ?>
                  <div>Alternate content</div>
              <?php endif; ?>

          <?php $i = 0; rewind_posts(); ?>

          <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

              <div id="right-column">
                  <?php the_content(); ?>
              </div>

              <?php endif; endwhile; else: ?>
                  <div>Alternate content</div>
              <?php endif; ?>

</div><!-- .entry-content -->

There is the code I am using for the child style.css file:

  .left-column {
  width: 346px;
  height: auto;
  float: left;
  clear: none;
  }
.right-column {
  width: 346px;
  height: auto;
  float: right;
  clear: none;
  }

Thanks for your help,
gary