Can’t centre menu items

hey! try as I might I can’t do it.

I’ve tried this:

 .banner ul {
    text-align: center;
    list-style: none;
    transition: opacity .2s, visibility .2s;
    margin-left: 300px;
}
@media (max-width: 480px){

.banner ul {
    text-align: center;
    list-style: none;
    transition: opacity .2s, visibility .2s;
    margin-left: 20px;
}

} 
@media (max-width: 767px){
.banner ul {
    text-align: center;
    list-style: none;
    transition: opacity .2s, visibility .2s;
    margin-left: 100px;
}

}

To no avail. I still can;t get the items centred. I’ve stuck in text-align: center; wherever I can in the . Banner bit.

Website is: https://thegodstonecomic.com/