title: How to make two divs of a total of 100% width fit in the screen
body: <p>here is <a href="https://jsfiddle.net/3psysuey/" rel="nofollow noreferrer">a fiddle</a></p>
  
  <p>I want two divs side by side occupying all the width of the window. I use <code>display:inline-block</code> on them so that they behave horizontally. </p>
  
  <pre><code>&lt;div id="left" class="horizontal"&gt;hello&lt;/div&gt;
  &lt;div id="right" class="horizontal"&gt;world&lt;/div&gt;
  </code></pre>
  
  <p>The problem is that when I set their width to equal 100% (left at 20% and right at 80%) they take larger than the screen, and the div on the right gets pushed under the other one.</p>
  
  <p>I get around this by setting the width smaller than 100% (19% and 79%) but this has some minor problems later on, sometimes putting unwanted spaces where I do not want it.</p>
  
  <p><strong>What am I missing to make it that my divs get along horizontally while using 100% of the screen?</strong></p>
  
  <p>I have seen the tricks listed <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/" rel="nofollow noreferrer">here</a>, as well as in <a href="https://stackoverflow.com/a/5078297/576767">this question</a>... and most of them are so ugly I still prefer using a less than 100% width.</p>
  
  <pre><code>* {
      padding:0;
      margin:0;
      border:0;
      border-spacing:0;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
  }
  html {
      height:100%;
  }
  body {
      height:100%;
  }
  #left {
      background-color: red;
      width:20%;
      height:100%;
  }
  #right {
      background-color: green;
      width:80%;
      height:100%;
  }
  .horizontal {
      display: inline-block;
  }
  </code></pre>