Cara o principal problema é que vc simplesmente colocou o `float` no elemento errado, vc tem colocar o `float` no primeiro elemento, assim o segundo elemento "flutua" ao lado do primeiro entende.

O problema é que ando vc coloca `float` em um elemento ele muda de escopo, e perde seus valores de referência no fluxo de conteúdo da página, então eu tive que fazer uns ajustes no seu código. 

Veja abaixo como ficou, repare que o `float:left` é na barra da esquerda.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    * {
        margin: 0;
        padding: 0;
        font-family: roboto;
    }

    .menu {
        background-color: #052e40;
        width: 200px;
        height: 100vh;
        text-align: right;
        line-height: 50px;
        float: left;
        /* vertical-align: middle;
        display: table-cell; */
        display: flex;
        align-items: center;
        padding-left: 50px;
    }

    a {
        text-decoration: none;
        color: #15b6ff;
    }

    li {
        list-style-type: none;
    }

    @font-face {
        font-family: 'roboto';
        src: url('roboto.ttf');
        font-weight: normal;
        font-style: normal;
    }

    .menu nav ul li a:hover {
        color: white;
    }

    hr {
        color: #15b6ff;
    }

    .home {
        background-color: red;
        /* width: 300px; */
        height: 100vh;
    }

<!-- language: lang-html -->

    <body id="corpo">
        <!--Barra lateral/Menu-->
        <section id="Barralat">
            <div class="menu">
                <nav>
                    <ul>
                        <li><a href="#">Pagina Inicial</a></li>
                        <hr>
                        <li><a href="#">Quem Somos Nós</a></li>
                        <hr>
                        <li><a href="#">Cursos</a></li>
                        <hr>
                        <li><a href="#">Pré-Matricula</a></li>
                        <hr>
                        <li><a href="#">Fale Conosco</a></li>
                        <hr>
                    </ul>
                </nav>
            </div>
        </section>
        <!--Final da barra lateral/menu-->
        <!--pagina inicial-->
        <section class="home">
            Pagina Inicial
        </section>
    </body>

<!-- end snippet -->