Keep footer aligned left

Site URL: http://www.timjobling.co.uk

Hi there, 

I'm currently using some custom CSS to centre align the main canvas on certain pages of my site, the code is as follows:

//Centre Canvas all pages
#canvas {
    display: flex;
  justify-content: center;
    align-items: center;
}

This works great, however it is also moving my footer across from the left hand of the screen, I was wondering if there was a way of excluding the footer so it remains justified to the far left hand side of the screen as I feel this gives the site a more whole screen feel. 

For an example of what I mean the footer is correct on my homepage here:

https://www.timjobling.co.uk/

But is more central on the project pages:

https://www.timjobling.co.uk/alex-may-hughes

As always any help with this would be great!

Thanks, 

Tim.

This sounds rather unusual, I believe this is a something with the Wexley aligning the page to the left. To do the the page margin is set to 0px on the left. The better way to center align your pages (without changing to another template) is to target the #page rather than #canvas and "fix" the margin like this:

#page {
   margin: 20px auto;
}

Hope that helps!

Hi there, 

thanks very much for your reply. 

I've popped your code in and it has centred the images nicely and the footer is back where it should be, Will it keep the content centred on larger screen sizes?

Many thanks again, 

Tim.

Yes, the page is centered with "auto" margins left and right, which means that they will be balanced and even and centered. Your previous method was fighting against this, rather than fixing it, which is why there was a few problems.

Amazing, thanks very much for your help.