What custom CSS would I use to make content area wider?

Hi there, on Singl, the following will allow you to adjust the width of the content area, which is set at 720px originally.

.page-header, .page-content, .hentry, .entry-thumbnail {
    width: 720px;
}

If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.

Child Themes
Child Theme creation plugins
Jetpack plugin
Custom CSS plugins

I tried this code but when I add it to the custom css area the theme is no longer responsive.

Hmm, that is interesting. It worked for me when I originally tried it in my web developer. Use the following instead and then adjust the max-width value.

.page-header, .page-content, .hentry, .entry-thumbnail {
    max-width: 720px;
    width: 100%;
}