nav {
    margin: 0px auto;
    width: 100%;
    height: 50px;
    background: #48435C;
}

    nav ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style-type: none;
    }

        nav ul li {
            width: 20%;
        }

            nav ul li a {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                text-decoration: none;
                font-family: Arial, sans-serif;
                color: white;
            }

    nav a:hover {
        background: #5A5766;
    }


label, #toggle {
    display: none;
}

    @media all and (max-width: 991px) {
        nav {
            height: 50px;
        }

            nav ul {
                display: none;
                flex-direction: column;
                background: #48435C;
                height: auto;
            }

                nav ul li {
                    background: #48435C;
                    width: 75%;
                    height: 100%;
                }

                    nav ul li a {
                        width: 100%;
                        height: 100%;
                    }

        label {
            width: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            font-size: 40px;
            color: white;
            cursor: pointer;
            height: 50px;
        }

        #toggle:checked + ul {
            display: flex;
        }
    }