Margin 0 auto is not centering my inner div

1

I read all the articles on stack over flow https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div like this and a few other sites. I’ve tried text align center to my outer div and making the inner div an inline block but it stays the same, its only center the side of the inner div, but not the center of it. What can I do to fix this?

Here is my codepen with the div I am trying to center. https://codepen.io/icewizard/pen/xpdpWK I just want to horizontally center it. Even margin-left: auto and margin-right: auto is not doing this. I’m on the quote maker project and I’m trying to model my divs by the example free code camp made, but I can’t even figure out in their css how they made the inner divs centered without using margin auto. I’m looking at this project to find out why https://codepen.io/1kindjune/pen/eJKQMYhttps://codepen.io/1kindjune/pen/eJKQMY but I don’t see how its done here either. I will appreciate any help on this.

2

hello aioy,

because there’s too much padding on center-box that it has no space left for its content,
so the content(quote) starts at the middle of the container(conter-box) trying to squeeze in
decrease the padding of center-box and increase its width
like so:

.center-box {
  margin: 0 auto;
  width: 960px;
  padding: 7em 15px;
  background-color: red;
}

chrome developer tool’s computed tab will help you see the box model

1 Like
3

okay thanks. just solved it.