ul.topnav {
    background: rgb(0 0 0 / 21%);
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
    font-size: 18px;
    position: relative;
    z-index: 100;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    float:left;
}

ul.topnav li {
    display: inline-block;
    float: none;
}

ul.topnav li a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 11px 12px 9px 25px;
    margin-left: 5px;
    transition: 0.3s;
}

ul.topnav li a:hover,
ul.topnav li.current a {
    color: #40aeff;
    background: url('logo_mini20.png') 0 center no-repeat;
}

ul.topnav li.icon,
ul.topnav li.menu-title {
    display: none;
}

@media only screen and (max-width: 500px) {
    ul.topnav {
        width: 100%;
        display: block;
    }
    ul.topnav li { display: none; }

    ul.topnav li.menu-title,
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
    ul.topnav li.menu-title {
        float: left;
    }

    ul.topnav.responsive {
        position: relative;
    }
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li.menu-title {
        display: none;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
        width: 100%;
    }
}