Html 向右浮动将div推到页面末尾

我试着把两个div并排放在一起。但是，执行此操作时，会将一个div推到页面的最右侧吗？我不知道它为什么这样做。感谢您的帮助：）

JSFIDDLE：

HTML:

---

将div放在父div中，并设置该父div的样式，使其具有两个div的宽度组合，在您的示例中为40vw

CSS：

.navrectangle {
  width: 20vw;
  height: 100vh;
  background-image: linear-gradient(to right, #002067, #013d98);
  float: left;
}
/** SECOND RECTANGLE **/
.addrectangle {
  float:right;
  display: inline-block;
  width: 20vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
}

#container {
  width: 40vw;
}

HTML：

<div id="container">
<div class="navrectangle"></div>
<div class="addrectangle"></div>
</div>

---

希望这就是您所寻找的

您需要将两个div向左浮动，使它们彼此相邻

.navrectangle{
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
float: left;
}
/** SECOND RECTANGLE **/
.addrectangle{
  float:left;
  display: inline-block;
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
}

---

只需去除浮子；正确的

<div id="container">
<div class="navrectangle"></div>
<div class="addrectangle"></div>
</div>

.navrectangle{
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
float: left;
}
/** SECOND RECTANGLE **/
.addrectangle{
  float:left;
  display: inline-block;
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
}