Here is an example you can start with:
#main,
#main:after,
.site-footer {
width: 100%;
background: #fff;
}
.page #content,
.single #content,
.error404 #content {
float: left;
}
#left-col {
margin: 0;
padding: 0 2%;
width: 18%;
}
#content {
background: #f1f2f1;
margin: 0;
padding: 0;
width: 75%;
}
It makes the main content area on the home page stretch to full width. It uses percentages for each main block area of content. Note that you can adjust the numbers as needed, but be aware of different possible screen sizes—not everyone has the same view of a site.
In the example I started you with, the width for posts and pages was left as is. This is because if you try to stretch the size of the featured images (which appear at the tops of those pages), it will distort the images.
Try out the CSS and experiment with the numbers to see if you can get the result you're looking for.