[Solved] Trying to center

[smeeker]

I’m trying to center the “click here” button, the text below the button and the image within the box. I’ve tried using the margin-left:auto; and margin-right:auto; within several different elements but it’s not budging. Any ideas?

http://codepen.io/smeeker/pen/wBJYYe

[Paulie_D]

.box {
  text-align:center;  
}

http://codepen.io/Paulie-D/pen/ZYeNXo?editors=110

[smeeker]

Thank you! I’ve also removed the <li> bullet as well. I’m wondering though, why the text under the “click here” button and the image are not centering to the overall box. They’re shifted to the right a bit. I’ve checked the spacing and removed the padding that was there within .box element but that didn’t help.

http://codepen.io/smeeker/pen/wBJYYe

[Shikkediel]

I don’t really see where the extra width originates but it helps to set padding: 0 at least as far down as the nested ul.

[Paulie_D]

You should probably start with a universal reset

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

That helps a lot.

http://codepen.io/Paulie-D/pen/bNqXey

I’d also prefer a p or a heading to a span for the .city…something block level. I’ve outlined it in red so you can see the difference.

[smeeker]

That worked perfect…thank you! Then it was easy to make other padding adjustments from there.

[Author]

Posts