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.

This isn't a DUPLICATE, My
tags are outside of the tags, therefore the answer provided in "Why is there vertical scroll on the main container?" does not make sense. Also the name "why is there vertical scroll on the main container" should be changed because I could not find an answer to this question for the life of me. — DR. Palson_PH.d, Sep 20 '17 at 19:40

Jim Cote · Accepted Answer · 2017-09-19T23:41:16.980

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>

CSS viewport width does not add up to 100vw

1 Answers1