How to place a div with page content on the side of the vertical menu that came included?

Question

I have the following structure for now:

The side menu came by include_once 'menu.php' and the page we’re looking at is home.php.

CSS from the 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;
}

Until then maybe it’s all right, what I’d like is to get the div in red that is written "Home" next to the side menu and power put widht: 100%. The way it is in the print, you’re with width: 200px (just for example) and if I put width: 100%, to div is under the side menu, which is not what is desired.

Codes of div in red, can also be called "content":

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

Maybe it’s not possible to put width: 100% To div "content", if not, how can I do to div "content" to be on the right side of the menu and occupy the rest of the screen? (The rest would be from the menu edge to the right side of the page, something like a (hypothetically) width: 100%-180px.

Desired:

Note: I am using the framework Bootstrap 4.

Answer 1

You can put the divs within the div with class="row no-gutters":

ul, li{
   margin: 0;
   padding: 0;
   list-style: none;
}

.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: 0px;
    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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="row no-gutters">
   <div class="menuVertical longBarVertical">
      <ul>
         <li><a href="">Link</a></li>
      </ul>
   </div>
   <div class="col" style="background: red;">
       <h1>Home</h1>
   </div>
</div>