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.
* {
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;
}
<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>