title: Why are my div colums overrunning and how can I make them flush with their container?
body: <p>I am creating a basic calculator in HTML/CSS without using Bootstrap. There will be four columns of buttons - three mostly for numbers, one for operator buttons (+, -, etc.). The operator buttons column will have five buttons, as opposed to four in the other containers. I want the button divs to all be perfectly flush with each other and with their surrounding container. However, I am running into two problems.</p>
  
  <p>First, when I try to give each column of buttons exactly equal width (25%), the last column appears outside of the box. There is a space between each column and I can't get rid of it. </p>
  
  <p>Second, the boxes vertically run over as well, even though I've set their height to a percentage of the height of their container. </p>
  
  <p>I will get rid of the button borders eventually, but included them here to more easily visually show what is going wrong. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
  }
  
  .mainBody {
    display: inline-block;
    width: 350px;
    height: 350px;
  }
  
  .outputWindow {
    width: 100%;
    height: 20%;
    border-bottom: 0px;
    background-color: rgb(164, 174, 177);
    text-align: right;
    line-height: 100px;
  }
  
  .buttonsBody {
    width: 100%;
    height: 80%;
    border-top: 0px;
    background-color: rgb(138, 142, 143);
  }
  
  .numColumn,
  .operatorColumn {
    display: inline-block;
    width: 25%;
    height: 100%;
  }
  
  .numButton,
  .operatorButton {
    line-height: 50px;
    border: 1px solid black;
  }
  
  .numButton {
    height: 25%;
  }
  
  .operatorButton {
    height: 20%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Calculator&lt;/title&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="mainBody"&gt;
      &lt;div class="outputWindow"&gt;Test &lt;/div&gt;
      &lt;div class="buttonsBody"&gt;
        &lt;div class="numColumn"&gt;
          &lt;div class="numButton"&gt;7&lt;/div&gt;
          &lt;div class="numButton"&gt;4&lt;/div&gt;
          &lt;div class="numButton"&gt;1&lt;/div&gt;
          &lt;div class="numButton"&gt;0&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="numColumn"&gt;
          &lt;div class="numButton"&gt;8&lt;/div&gt;
          &lt;div class="numButton"&gt;5&lt;/div&gt;
          &lt;div class="numButton"&gt;2&lt;/div&gt;
          &lt;div class="numButton"&gt;.&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="numColumn"&gt;
          &lt;div class="numButton"&gt;9&lt;/div&gt;
          &lt;div class="numButton"&gt;6&lt;/div&gt;
          &lt;div class="numButton"&gt;3&lt;/div&gt;
          &lt;div class="numButton"&gt;=&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="operatorColumn"&gt;
          &lt;div class="operatorButton"&gt;Del&lt;/div&gt;
          &lt;div class="operatorButton"&gt;÷&lt;/div&gt;
          &lt;div class="operatorButton"&gt;x&lt;/div&gt;
          &lt;div class="operatorButton"&gt;-&lt;/div&gt;
          &lt;div class="operatorButton"&gt;+&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>