Hi, Jann:
It looks like you have Jetpack installed. If you have not already done so, activate the Custom CSS option by going to Jetpack → Settings. Then, go to Appearance → Edit CSS and add these three rules (note that the rules are surrounded by a media query):
@media screen and (min-width: 880px) {
#main {
width: 74.59%;
}
#content {
width: 75.669%;
}
#secondary {
width: 17.275%;
margin-left: 7.054%;
}
}
The first rule (for #main adjusts the overall width of the entire content area, which is the blog posts plus the sidebar. So right now, you’ve got about a quarter of your page to the right not being used.
The second rule (#content) controls the amount of space for your blog posts. This percentage is based on the space inside the #main container, not the overall width of the page (hope that makes sense).
The third rule (#secondary) controls the amount of space for your sidebar. Again, this percentage is based on the space inside the #main container, not the overall width of the page (hope that makes sense). The margin-left property controls how much empty space (the “gutter”) there is between the blog content and the sidebar.
You’ll see, then that the percentage for the #content (75.699%), the #secondary (17.275%), and the gutter (7.054%) add up to 100% (99.998%, but close enough).
So what I would do, first, is adjust the width for #main to about 90% or even 100% so you’re using a larger portion of the screen width. And then you could tweak the widths of #content and #secondary as you like. The only thing you have to remember is that the percentages for the three widths add up to 100% or less so the sidebar doesn’t drop down below the blog content.
