site  {
    margin: 0 auto;
    max-width: 1403px;
}
.sidebar  {
    float: left;
    margin-right: -100%;
    max-width: 413px;
    position: relative;
    width: 29.4118%;
}
.secondary  {
    background-color: transparent;
    box-shadow: none;
    display: block;
    margin: 0;
    padding: 0;
}
.site-main  {
    padding: 8.3333% 0;
}
.site-content  {
    display: block;
    float: left;
    margin-left: 29.4118%;
    width: 70.5882%;
}

I’m hoping someone can confirm that I can tweak those two widths, within reason, say to 20% vs. 80% or even 15% vs. 85%, or someone may know that doing this is likely to hit problems that may not be immediately obvious with other settings.

TIA, Chris

body::before {
    background-color: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    content: "";
    display: block;
    height: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 29.4118%;
    z-index: 0;
}

to adjust the background width. Adjust .site-content and .sidebar widths, plus .site-content margin left. Keep all widths and margins as percentages.

The only way to see if there are hidden problems lurking is to check your site with various screen widths and devices. Whatever crops up should be fixable with further CSS adjustments.

OK, I’ve got a staging site so I can change things and look at them as you say.

One real newbie question: what is the best way to do this? I am running a child theme created from twenty fifteen with the child theme configurator pro plugin and assumed that it would a good tool to use to tweak those percentages but it won’t let me edit them. I guess I could go down to the OS (Debian) and grep for “29.4118%” and for “70.5882%” and locate those entries and tweak them with an editor (after saving copies of the original files somewhere safe!)

I’m guessing there may be better, easier and safer ways to do this though. Any advice (bcworkz or anyone!) TIA and thanks bcworkz again, Chris

I’m pretty sure all the rules are in the style.css file. You can use your browser’s element inspector developer tool to find the exact line number if you want. There is a tool icon that lets you pick an element on the page, then the tool shows your the relevant HTML and CSS with file and line number info. The trick is finding all the relevant HTML elements. It’s worth learning to use this tool anyway IMO.

The other thing you can do is copy/paste the relevant CSS to the Additional CSS panel. Delete any rules you do not change, keeping only the selectors and the changed rules. These will override any similar rules in external files.