Tenho a seguinte estrutura, por enquanto:

O menu lateral veio por include_once 'menu.php' e a pagina que estamos vendo é a home.php.

CSS do menu:

.longBarVertical {     width: 180px;     min-height: 100%;     background-color: transparent;     border: 1px solid blue;     float: left; }  .logoMenu {     margin-top: 15px; }  .logoMenu img {     width: 50px; }  .menuVertical {     position: relative;     width: 180px;     padding: 0px;     list-style: none;     overflow: hidden;     margin-top: 15px; }  .menuVertical li a {     padding-left: 15px;     line-height: 45px;     display: block;     overflow: hidden;     position: relative;     text-decoration: none;     color: rgb(225, 225, 225);     border-left: 5px solid transparent; }  .menuVertical li:hover a, .menuVertical li:hover a i {     color: black;     -webkit-transition: all 0.15s linear;     -moz-transition: all 0.15s linear;     -o-transition: all 0.15s linear;     transition: all 0.15s linear; } 

Até ai talvez esteja tudo certo, o que eu gostaria era de conseguir colocar a div em vermelho que está escrito “Home” ao lado do menu lateral e poder colocar widht: 100%. Do jeito que está no print, está com width: 200px (apenas para exemplo) e se eu colocar width: 100%, a div fica embaixo do menu lateral, o que não é o desejado.

Códigos da div em vermelho, também pode ser chamada de “conteudo”:

<div style="background-color: red; width: 200px; float: left;">     <h1>Home</h1> </div> 

Talvez não seja possivel colocar width: 100% pra div “conteudo”, caso não seja, como eu posso fazer pra div “conteudo” ficar ao lado direito do menu e ocupar o restante da tela? (O restante seria da borda do menu até o lado direito da pagina, algo como um (hipoteticamente) width: 100%-180px.

Desejado:

Obs: Estou usando o framework Bootstrap 4.