Why is centering not working on flex-direction: column in React?

Question

Flexbox

import React from 'react';
import './Footer.css';

const Footer = () => {
    return (
        <div className='main-footer'>
            <div className='container'>
                <div className='row'>
                    <div className='col'>   
                        <p className='footer__dragon'><i class="fas fa-dragon"></i> DragonBook</p>              
                    </div>  
                    <div className='col'>
                        <p><i class="far fa-copyright"></i> 2020 All right reserved</p>
                    </div>
                    <div className='col'>
                        <p>Fatto con <i class="fas fa-heart"></i> e <i class="fas fa-mug-hot"></i> per amatori dei <i class="fas fa-book"></i></p>
                    </div>          
                </div>
            </div>
        </div>
    )
}
export default Footer;

.main-footer {
    color: white;
    background-color: #a5805d;
    padding: 50px 0;
}
.footer__dragon  {
    color: #b16da8;
    background-color: white;
    display: inline;
    padding: 5px 10px;
    border-radius: 100px;
    border: 2px solid #b16da8;
}
.footer__dragon i {
    color: #b16da8;
}
.main-footer .row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    overflow: hidden;
}
.main-footer p {
    width: 100%;
}

@media (max-width: 768px) {  
    .main-footer  .row {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

Answer 1

Why doesn't it work? It works, just inside the footer there is only one element - div.container. If you want .cols to line up horizontally, then display: flex, flex-direction, and flex-wrap must be applied to their immediate parent, which is div.row .