Archived topic
Content Container Not Centred?
7 replies · Started by Simon on February 26, 2021
I know the title is wider width but still, the content column isn't centred across the site and I can't find out for the life of me why.
See the image below, title is centred but content column on posts isn't:

Hi Simon,
The Page hero is indeed centered, the issue is that your content is not centered.
https://www.screencast.com/t/tiWl7Lsrq
That's right, so how do I fix it? :-)
So would you like the content to be centered? Or would you like to move the header align with the not centered content?
May I ask is there a special reason that an empty right sidebar is placed in the post? It creates problems for the overall layout.
Oh I see, so it's this that's causing the issue?
@media(min-width: 1180px) {
.right-sidebar .site-content .content-area {
width: 75%; /* Width of content minus width of sidebar */
margin-left: 25%; /* width of sidebar */
}
}
I would definitely like the content column to be centred and then a small sidebar to the right of it.

But if this really isn't possible then I'll choose to give up the sidebar.
I did a little math for you :)
The content is set to 75% width, right sidebar is 25%, these 2 number is based on the container width, but the margin you set in your CSS is based on the screen width. That's why the spaces are not even.
If you want the same spacing on the left side of the content, then the number should be 25%÷75%=33.33%. If you change the sidebar width, you'll need to calculate the number again.
So scrap the margin-left: 25%;, use the below CSS instead:
@media(min-width: 1180px) {
.post .inside-article {
margin-left: 33.33%;
}
}
Let me know :)
You are amazing, thank you so much honestly!
A lot of work (and a lot of help from support) these last couple fo days but so happy with it now.

Thank you again and have a wonderful weekend! :-)
You are welcome, good luck to your new site :)