CSS “margin: 0 auto” not centering

Question

Okay I understand that this topic has been covered. But I have looked at various solutions and have had little success with them.

I just have no clue why this

Answer 1

Another fix that worked for me was to change the display for the parent to display: inline in the CSS and set a max-width so that margin auto centers the text. So far, that has fixed the problem. Not sure if it's the best solution, but it's currently working. See the code below:

.parent-container{
    display: inline;
    max-width: 500px;
    padding: 20px; 
    margin: 0 auto; 
}