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.
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?