Left sidebar with the content div on right with Bootstrap

Question

I have a problem here with my HTML / CSS grid, made using Bootstrap 4. I'm trying to create a left sidebar ( fixed ) with a div on right for content ( this will not be fixed ). I've tried to do this, but you can see the result in the image:

What I really want to do is to display the orange sidebar inline with that black box. My code for this is:

see the code snippet

---

 .primary_continer { background-color: #4423d4; height: 100%; padding-top: 55px; margin: 0; position: relative; overflow: hidden; display: table; } .left_menu { width: 100%; /*235px*/ max-width: 235px; height: 100%; background-color: #ff9303; padding-top: 80px; padding-left: 0px; float: left; position: fixed; display: table-cell; } .center_content { background-color: #000; width: 70%; /*700px*/ float: right; position: relative; display: table-cell; } HTML: 

 <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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><div class="container-fluid primary_continer"> <div class="row justify-content-md-left"> <div class="col col-lg-2 left_menu"> 1 of 3 </div> <div class="col center_content"> Variable width content </div> </div> </div> 

Answer 1

Just gave margin-left (width of fixed) to the content

.center_content {
  background-color: #000;
  width: 70%;
  float: right;
  position: relative;
  display: table-cell;
  margin-left: 235px; /*Added*/
  color:#fff;/*Added for me*/
  min-height: 100vh; /*Added newly*/
}