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 -->