How To Center Align Twenty Fourteen WordPress Theme With CSS?

Twenty Fourteen is the a beautiful, responsive and fast WordPress theme official released by Automattic but sometimes it looks rather odd when a Twenty Fourteen website is displayed left aligned on high resolution screens leaving some space on the right side.

Likewise Fourteen Extended plugin (which was designed to tweak Twenty Fourteen theme) is missing from WordPress plugin repository (but its BETA release is still available here). So is there any easy way to center align the whole Twenty Fourteen website including its header, sidebars, content, footer etc on big screens while maintaining the layout as is on mobiles and tablets?

Yes, there is. All you have to do is use following CSS for your website theme:

#page {
margin-left: auto;
margin-right: auto;
}

Instead of editing your main Twenty Fourteen theme, you can either create a child theme then add this CSS or you may use Simple Custom CSS plugin for adding custom CSS without any hassles.

Simply install and activate Simple Custom CSS plugin the visit your admin area dashboard Appearance -> Custom CSS screen and add the given CSS code. Save the changes and that’s it. The CSS code centrally aligns your whole Twenty Fourteen WordPress site.