Can't get CSS to affect custom template

Greetings. Newbie here — in fact, I am designing my very first WP site and this is my first forum post. I am using the twentytwelve theme, and making all my changes to a child theme.

My site will be mostly pages, only one actual blog page. My front page is working pretty well, but am now ready to add things (like additional widget area) to the front page that won’t be in other pages. To keep the distinction, I created a custom template for all the other pages on the site. I copied the contents of the front page template into the new template and expected the new template to behave similarly. I found I had to do some differential styling in style.css (in my child theme) but cannot figure out why the page text moves to the right (correctly) on the front page but not the others. (The li style works OK in both places.) Some of my css modifications are just random things I tried that seemed to help — I don’t necessarily understand why.

Here is the css:

/* move sidebar to left and remove bullets */

.widget-area {
float: left;
margin-top: 30px;
	width: 35%;
	border: 0;
}

.widget-area .widget li {

	list-style-type: none;

}

.template-front-page .widget-area {
	float: none;
	margin-top: 30px;
	width: 35%;
	border: 0;
}

.template-front-page .widget-area .widget li {
	list-style-type: none;
	}

Test site is here: js.beachdogz.com

Home page is built on front page template. All others are built on the custom template, nonfront-page.php, except for the Musicians page. You can see the difference!

Thank you!