HTML Code:

<div class="ct">
  <div class="left">left</div>
  <div class="right">right</div>
   <div class="main">main</div>
</div>

CSS Code:

.left,
.right {
  width: 100px;
  height: 100px;
}
.left {
  background: blue;
  float: left;
}
.right {
  background: green;
  float: right;
}
.main {
  background: red;
  height: 100px;
  margin: 0 100px;
}

because width:100% is set for .main, so squeeze the following .left and .right to the next line.
you set .main to width:calc (100%-100px); and width:calc (100%-99px); compare it.

.main {
  background: red;
  float: left;
  height: 100px;
  width: 100%;
/*   margin-left: 50px ; */
  margin-right: 
 
}

you are squeezed out because you set main to width:100;. If you want to keep them on one line and keep them 100%, you can set them in main

margin-left:-200px;

remove right at the same time

margin-left: -510px;