Enlarge content area on site with vertical sidebar

I’m back – sorry! Thank you so much for the help you’ve been giving me.

I’ve been trying to figure out how to enlarge the main content area on my site – https://new.wisefoolnewmexico.org. It was all stuck to the left side of the screen, with a giant red area on the right. I just adjusted things as follows to get it to look how I’m hoping it will look:

.grid-25 {
float: left;
width: 150px;
}
.push-25 {
left: 17%;
}
.pull-75 {
left: -72%;
}
.grid-75 {
float: left;
width: 77%;
}

However – now that I have made these adjustments, when I shrink the browser window to see how it will look on a smaller screen or tablet, a) the logo disappears for a while and then when the window gets smaller and switches to the view with menu at the top, there is enormous red space on the right side of the screen. I’m wondering if

a) I can set the break point sooner – that it will break into menu on top at a wider resolution than it does right now, so that a logo is maintained and

b) how to eliminate that red space on the right once it does break into tablet or phone view.

Any thoughts?