Failing to centre... Options

[Brian Chandler]

Probably an elementary question, but I am working on the footer for my new shop; you can see an example here:
https://imaginatorium.com/moomin.html

At the bottom there are two boxes (blue and red) for the footer buttons: here is the css

CODE

DIV.ftrlinks {
    clear: both;
    width: 50%;
    margin: 0 10em;
border: solid 1px blue;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.2em;
    padding: 0;
}

DIV.test {
    clear: both;
    width: auto;
    margin: 0 25%;
border: solid 1px red;
    margin: 0.2em;
    padding: 0;
}

On the ftrlinks div I set the width to 50%, which has the intended effect, then margin auto in the horizontal direction is supposed to move it to the centre, but doesn't. What have I misunderstood here? (I feel I have spent 20 years writing margin: 0 auto to centre something...)

Then on the second (test) div I tried setting margin to 25%, which does not seem to work at all.

Intuitively I think of % as a proportion of the including box, but this only works horizontally (or something equally ccsish). FWIW this is contained within div footer as follows:

CODE

DIV.content {
    min-height: 80vh;
}

No width specified, but the diagnostic thingy says width computed as 15xx pixels, so it cannot surely be zero. Help!

[Brian Chandler]

Crumbs, brian^h^h^hain must have gone on holiday. I changed it to margin: 0 auto, and it (the first, blue box) does indeed work.

And the red one! Thanks Christian.