When I am looking for a CSS solution I often start with good old Google and the Squarespace Answers website. I immediately found a few posts on the same topic and this is the one I used as the basis for my own custom CSS. The code didn't quite work in my Bedford template and I had to fix some of the padding and margins to make it look better. I also added code for mobile views to make sure this also looked good on tablets and phones.
As a general rule I don't recommend to make changes to the structure of a template and to resize fixed containers using CSS but if you are set on doing this then this method may work well. As always I recommend thorough testing across browsers and different screen sizes.
Here is the code, feel free to play around with the padding and margin value to adjust to your own preferences if needed.
NOTE: I added the border code at the top of each element because I often use borders to outline the element I am targeting so that I can see its exact placement on a page and identify, for instance, padding and margins. To "turn on" the borders simply replace 0px with 1px. And once you are finished and happy with your code feel free to remove the whole border line for each element.
Subscribe to my newsletter for Squarespace news & tips, blog post summaries, special offers, instant e-course discounts and the occasional deeper musings I am known for!