Center page content margin: 0 auto; not working?

Question

I am trying to centre the content on this page http://www.seoweather.com/google-cache-search/

I tried adding the below but no luck.

.container_24 .grid_24 { margin: 0 auto; }

As I understand, if the margins are set to margin: 0 auto; and the width is defined which it is as per below, it should center?

.container_24 .grid_24 { width: 960px; }

I'm obviously going wrong somewhere, please enlighten me :)

Use the inspector to see if there isn't another css margin rule overruling this one — Liora Haydont, Mar 30 '18 at 15:30
`please enlighten me` --> share your full code here and we will do — Temani Afif, Mar 30 '18 at 15:30

score 1 · Answer 1 · answered Mar 30 '18 at 15:42

Against my better judgment, I opened your link to check it out. It's best if you don't post links like these since everyone runs a risk of a click bait. Anyhow, use this instead

div#main-content {
    text-align: center;
}

This center your container content elements but not your p tags because you explicitly told them to be left aligned in CSS at a higher scope. So create a class called text-center and use it only to override the text you want centered

.text-center {
    text-align: center;
}

You can use margin: 0 auto, but you have to adjust your displays from inline to inline-block along with your widths. Probably not worth the trouble if all you're looking for is a simple block of info to center

Center page content margin: 0 auto; not working?

1 Answers1