DropDown Menu Alignment

Personal, I'm making a menu and I have the following problem:

Asyoucanseetheitemsdonotlineupasthetop****,wouldyoulikemetohavethislistgoleft?IalreadytriedsometagsbutIcouldnot(probablyI'musingthewrongtagaeuhaue)

HTML

<navclass="menu">
            <ul>
                <li><a href="#">Mr. Taste</a></li>
                <li><a href="#">Parceiros</a></li>
                <li><a href="#">Produtos</a>
                    <ul>
                        <li><a href="#">Lanches</a></li>
                        <li><a href="#">Batatões</a></li>
                        <li><a href="#">Panquecas</a></li>
                        <li><a href="#">Pratos Feito</a></li>
                    </ul>
                </li>
                <li><a href="#">Sobre nós</a></li>
                <li><a href="#">Redes Sociais</a>
                    <ul>
                        <li> <a href="#">Facebook</a></li>
                        <li> <a href="#">Instagram</a></li>
                        <li> <a href="#">Twitter</a></li>
                        <li> <a href="#">Whatssap</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

CSS

{
    margin: 0;
    padding: 0;
}

.menu {
    width: 100%;
    height: 53px;
    background-color: #222;
    font-family: 'Segoe UI';
}

    .menu ul {
        list-style: none;
        position: relative;
        list-style-type: none
    }

        .menu ul li {
            width: 200px;
            float: left;
        }

    .menu a {
        display: block;
        text-decoration: none;
        text-align: center;
        background-color: #222;
        color: #fff;
        padding: 15px;
        left:0;
        list-style:none;
    }

    .menu ul ul {
        position: absolute;
        visibility: hidden;
        list-style-type: none
    }

    .menu ul li:hover ul {
        visibility: visible;
    }

    .menu a:hover {
        background-color: #f4f4f4;
        color: #555;
    }

    .menu ul ul li {
        float: none;
        border-bottom: solid 1px #ccc;
    }

        .menu ul ul li a {
            background-color: #069;
        }

label[for="bt_menu"] {
    padding: 5px;
    background-color: #222;
    color: #fff;
    font-family: "Segoe UI";
    text-align: center;
    font-size: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

#bt_menu {
    display: none;
}

label[for="bt_menu"] {
    display: none;
}

@media(max-width: 800px) {
    label[for="bt_menu"] {
        display: block;
    }

    #bt_menu:checked ~ .menu {
        margin-left: 0;
    }

    .menu {
        margin-top: 5px;
        margin-left: -100%;
        transition: all .4s;
    }

        .menu ul li {
            width: 100%;
            float: none;
        }

        .menu ul ul {
            position: static;
            overflow: hidden;
            max-height: 0;
            transition: all .4s;
        }

        .menu ul li:hover ul {
            height: auto;
            max-height: 200px;
        }
}

Thanks in advance!