I have a design where the header and footer are 1170px wide. (Standard Twitter Bootstrap 12 column container size.)
I have been reading about the ideal width for good readability and discovered that the content width should not be more than 600-700px wide. The problem I am facing is this-
Except for the blog which has a sidebar all other pages have content sections which are 600px wide (trying to follow above guideline). So if I align it to the left then there is empty space on the right and if I align it to the center then it doesn't line-up with the header and the footer and it feels like it is floating
Here's what these pages look like. Quickly mocked up since I can't use actual design. it's for a online course website.
How does one approach this layout issue? Should I forcefully create sidebar content so that content + sidebar can line-up with header and footer (like the blog pages) or is it alright to center align the content boxes on these pages (include pages like about us, terms of use, my dashboard, my profile, my payments which currently have a single column of content)
I can't reduce the width because the homepage and blog articles are able to use the entire 1170px by the design. Is there a guideline or good practice for such situations?