Site content & sidebar width change breaks responsive?

When I try to change (or even duplicate from the parent) the .site-content and .sidebar widths, my site becomes “non-responsive,” i.e. it no longer resizes properly for small screens.

(I’m using WP 3.8.1 and Tiny Forge 1.5.5 with child theme)

I also changed the site width to 1060px following Tomas’ tutorial.

I’m putting in the following CSS in a child theme (using Jetpack plug in for custom CSS):

/* 12.1 Minimum width of 600 pixels */
@media screen and (min-width: 600px) {
.site {
max-width: 1060px;
max-width: 75.714285714rem;
}
}

.site-content {
float: left;
/*width: 75.104166667%;*/
/* parent css width is 65.1… */
/*width: 65.104166667;*/
}

.widget-area {
float: right;
/*width: 20.5%;*/
/*parent css width is 30.5 */
/*width: 30.5%;*/
}

If I use original width pair (65/30) or the new widths (75/20), the responsiveness breaks. If I leave the pairs commented out, the site works fine but with the parent widths.

Any ideas?!!!

Thanks, Clive