3 column version established, but I want only 2 when using a Page Template

I must admit that I am groping in the dark when it comes to CSS.

By looking at my page via firefox/firebug I can see that, even though I have defined that the left column should be on the left side in style.css for my child-theme, the column ends to the right when I only want one sidebar.

So I have made a new div class called widget-page-area. The sidebar is now to the left, but I cannot get the sidebar up next to the calendar.

What shall I do?

Page template looks now like this:

<?php
/**
 * Template Name: Left Sidebar Only
 */

get_header(); ?>

	<div id="primary" class="site-page-content">
		<div id="content" role="main">

			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
				<?php comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->

	</div> <!-- #primary -->

	<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
		<div id="secondary" class="widget-page-area" role="complementary">
			<?php dynamic_sidebar( 'sidebar-1' ); ?>
		</div><!-- #secondary -->
	<?php endif; ?>

<?php get_footer(); ?>

My style.css looks now like this:

/* Left & Right Sidebars */
@media screen and (min-width: 600px) {
    .site-content {
        width: 53%;
        margin-left: 20%;
    }
    .custom-layout .widget-area {
        float: left;
        margin-left: -73%;
        position: relative;
	width: 20%;
    }
    .custom-layout #extra-sidebar {
        float: right;
        width: 25%;
    }
    .site-page-content {
        width: 78%;
        margin-left: 20%;
    }
    .widget-page-area {
        float: left;
        margin-right: -73%;
	width: 20%;
    }
}

found the error: a missing line in style.css

.site-page-content {
   float: right;
   width: 78%;
   margin-left: 20%;
}