Set content width to 100% on pages with no sidebar

The grid system only allows for sidebar widths to be set in 5% increments using Customize. If my container is 1200px, 25% give me a 300px sidebar width. The next available width is 30%, which creates a 360px sidebar width. What if I just need a 320px sidebar? I can't do it in Customize. In another Support thread I found that I could target #primary and #right-sidebar with CSS to get the width I need.

@media (min-width: 768px) {
    #primary {
        width: 73%;
    }
    #right-sidebar {
        width: 27%;
    }
}

This works great for sites that have a right sidebar on every page. It does not work for sites with some sidebar pages and some full width pages as the full width pages are then limited to 74%. The first site I tried and noticed this on only had 2 full width pages. The code below took care of this.

/* No sidebar */
@media (min-width: 768px) {
 .page-id-8 #primary, .page-id-10 #primary {
        width: 100%;
    }
}

What about sites with lots of pages, some with and some without sidebars? I could just add more pages using page ID, but it seems to me that this could be better handled with some PHP in functions.php. Rather than spend a lot of time trying to come up with the right script and discovering the correct selectors to target, I thought to ask the experts here.

Can you folks suggest a script that will set #primary to 100% width on pages with no sidebars?