CSS viewport width does not add up to 100vw

Question

I am creating a row of <div> elements using the following code: HTML:

.row_1_element{
  text-align:center;
  font-size:3vw;
  width:20vw;
  float:left;
}

<div id="row_1">
  <div class="row_1_element">
  Menu 
  </div>

  <div class="row_1_element">
  user 
  </div>

  <div class="row_1_element">
  profile
  </div>

  <div class="row_1_element">
  ?
  </div>

  <div class="row_1_element">
  ?
  </div>
<div>

The problem is that all 5 <div> elements do not fit into one row across the screen, instead 4 fit and the 5th goes to the next row. This makes little sense if 1vw is 1/100 of the viewport width, since 5 *(20/100) = 100/100 viewport width. Therefore there should be enough space for all 5 of them to fit.

Answer 1

You must remove the default margins from the page if your content spans the entire 100%:

body {
    margin: 0;
}

.row_1_element {
    text-align:center;
    font-size:3vw;
    width:20vw;
    float:left;
}

<div id="row_1">
  <div class="row_1_element">
  Menu 
  </div>

  <div class="row_1_element">
  user 
  </div>

  <div class="row_1_element">
  profile
  </div>

  <div class="row_1_element">
  ?
  </div>

  <div class="row_1_element">
  ?
  </div>
<div>