CSS: Won't center div with max-width

I had a similar issue. Setting

margin-left: auto;
margin-right: auto;

on the inner div worked for me.

If you need the .content to be inline-block, just set the container text-align: center and the content text-align: left. You won't be able to center inline-block elements using margin: auto.

I tried this and it worked

.element-container{
   width:100%;
   max-width: 700px;
   margin: 0px auto;
}
.element{
   width: 80%;
   max-width: 700px;
   height: auto;
   margin-left: 10%;
}