Remove left sidebar

Just in case anyone finds this post again

this worked perfectly for me

site,
.site-header {
 max-width: 100%;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta, .page-content {
 /* Original max-width: 474px */
 max-width: 80%;

}

.site:before {
    width: 0;
}

#secondary {
  display: none;
}
#content {
  margin-left:0px;
}

ourmanflint’s solution resolved the issue for me, but I’m not sure exactly how. By itself, changing #secondary to display none doesn’t eliminate the black sidebar, which is defined somewhere below it, by margin and width settings apparently.

to remove sidebar through css the only code necessary is

.site:before {
    display: none;
}

#secondary {
  display: none;
}

Update my post from 5 months ago:
While the below instructions will remove the black right sidebar, it still leaves a smaller white sidebar:

With the 2014 theme, install the Fourteen Extended Plugin. Go to Appearance, Customize, Twenty Fourteen General Options, and click Remove Primary (Left) Sidebar. I had to select “Remove the Feature Content” too but should work without checking this. Credit to MyEZ WP (YouTube).

Also, under Fourteen Extended, select “Twentyfourteen Content Options” and change “Content Max-Width” to 800. This will move your content all the way to the left…no more space.

Thanks ourmanflint.
I”ve added the following for tablets and mobiles so that the content expanded to their widths.

@media screen and (max-width: 783px) {
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content,
.post-navigation,
.image-navigation,
.comments-area {
max-width: 100%;
}
}

@ipunkbali I feel you.

My first thought on this thread was: “There’s no way I’m doing this with CSS!” So I set out to set page templates to full width and remove the sidebar from the template in page.php.
It was then that I realised that the massive black area at the left side isn’t caused by an actual HTML element. It’s an area that was created by the CSS ::before pseudo class. (Which is a pretty damn ugly solution, considering it’s an official WordPress theme.)
So it’s perfectly fine to make it go away using CSS.

(Why, oh why, WordPress…)

In my opinion, it would be better to remove the sidebar from the site structure completely. This can be done via the functions.php and is much cleaner then doing it via CSS.

This is what you should be seeing:

/**
 * Register three Twenty Fourteen widget areas.
 *
 * @since Twenty Fourteen 1.0
 */
function twentyfourteen_widgets_init() {
	require get_template_directory() . '/inc/widgets.php';
	register_widget( 'Twenty_Fourteen_Ephemera_Widget' );

	register_sidebar( array(
		'name'          => __( 'Primary Sidebar', 'twentyfourteen' ),
		'id'            => 'sidebar-1',
		'description'   => __( 'Main sidebar that appears on the left.', 'twentyfourteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h1 class="widget-title">',
		'after_title'   => '</h1>',
	) );
	register_sidebar( array(
		'name'          => __( 'Content Sidebar', 'twentyfourteen' ),
		'id'            => 'sidebar-2',
		'description'   => __( 'Additional sidebar that appears on the right.', 'twentyfourteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h1 class="widget-title">',
		'after_title'   => '</h1>',
	) );
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area', 'twentyfourteen' ),
		'id'            => 'sidebar-3',
		'description'   => __( 'Appears in the footer section of the site.', 'twentyfourteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h1 class="widget-title">',
		'after_title'   => '</h1>',
	) );
}
add_action( 'widgets_init', 'twentyfourteen_widgets_init' );

Now just remove the part related to the “Primary Sidebar” and it should be looking like this:

function twentyfourteen_widgets_init() { // Register three Twenty Fourteen widget areas.
	require get_template_directory() . '/inc/widgets.php';
	register_widget( 'Twenty_Fourteen_Ephemera_Widget' );
	register_sidebar( array(
		'name'          => __( 'Content Sidebar', 'twentyfourteen' ),
		'id'            => 'sidebar-2',
		'description'   => __( 'Additional sidebar that appears on the right.', 'twentyfourteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h1 class="widget-title">',
		'after_title'   => '</h1>',
	) );
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area', 'twentyfourteen' ),
		'id'            => 'sidebar-3',
		'description'   => __( 'Appears in the footer section of the site.', 'twentyfourteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h1 class="widget-title">',
		'after_title'   => '</h1>',
	) );
}
add_action( 'widgets_init', 'twentyfourteen_widgets_init' );

Only problem I am still having with this is that the site description still does not show up correctly. It sits on the bottom of the page to the left. Every CSS and WP hook I tried does not seem to work.

Easy way to get rid of the left side bar menu.
Goto /httpdocs/wp-content/themes/”your_theme”/page.php
Comment out the code ‘<section id=”main” class=”col-left”>’
This will re-center the remaining content of your page.
Then comment out the code ‘<?php get_sidebar(); ?>’
This will keep the sidbar from loading. That’s it.