Increasing Header Width in the Rally Squarespace Template

How to Increase Header Width in the Rally Squarespace Template

I've been intrigued with the debate over using WordPress vs. Squarespace for blogs and decided to look into it myself. I've built and maintained blogs in WordPress in the past, so I decided to play around with a blog site in Squarespace. There are a few more limitations in Squarespace, and I'm still learning my way around, but so far it's easy and fun. My blog site, Simple Tips, is built on the Rally theme and I've made a few tweaks to the Rally template using Custom CSS.  One small change with a big impact is to increase the header width, so that my logo and navigation move further out to the sides of the site. You can see the difference here:

 Default Spacing of Rally Header

Default Spacing of Rally Header

 Rally Header after Custom CSS

Rally Header after Custom CSS

How to Increase Header Width in the Rally template

It really is just a simple line of code, added to Design > Custom CSS. Feel free to play around with the padding until you get the look you want. The default Rally theme has both left and right inner header padding set to 180px, but I like the look much better reduced to 80px on each side.

/* Increase width of Rally header */
.Header-inner {
    padding-left: 80px;
    padding-right: 80px;
}

I'd love to hear if this tip helped you out!