title: Where is this tiny bit of space/gap coming from?
body: <p>I'm essentially creating a "sliding-door" animation with the words "HELLO" in the middle, that will split in half as the doors open. The text on the left has letters pushed right up to the edge of the left "door"/div, while the text on the right has a tiny little gap on the left (the "LO!"). I checked with the dev console, and don't see any padding, border, or margin that could be causing this. It's obviously not a big deal, but how can I push the letter "L" in "LO!" flush up against the edge of the div/door container that it's in? </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 {
    height: 100%;
    width: 100%; }
  
  .container {
    border: 1px solid black; }
  
  .doors {
    height: 100vh;
    width: 50vw;
    border: 1px solid blue;
    position: absolute;
    display: inline-flex;
    align-items: center; }
  
  #left-door {
    background-color: #1c1b1a;
    left: 0;
    transition: all 1s;
    justify-content: flex-end; }
  
  #right-door {
    background-color: #f9d73e;
    right: 0;
    transition: all 1s;
    justify-content: flex-start; }
  
  .slide-right {
    margin-right: -100%; }
  
  .slide-left {
    margin-left: -100%; }
  
  .door-text {
    font-family: 'Lato', san-serif;
    height: 100px;
    width: 50%;
    font-size: 4em;
    line-height: 100px;
    font-weight: 900; }
  
  #text-left {
    text-align: right;
    color: #f9d73e; }
  
  #text-right {
    text-align: left;
    color: #1c1b1a; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
   &lt;title&gt;Portfolio&lt;/title&gt;
   &lt;!-- Bootstrap CDN --&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"&gt;
   &lt;link rel="stylesheet" href="./home.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="left-door" class='doors'&gt;
    &lt;h1 id="text-left" class="door-text"&gt;HEL&lt;/h1&gt;
   &lt;/div&gt;
   &lt;div id="right-door" class='doors'&gt;
    &lt;h1 id="text-right" class="door-text"&gt;LO!&lt;/h1&gt;
   &lt;/div&gt;
   &lt;div class="container"&gt;
    &lt;h1&gt;this is the body&lt;/h1&gt;
   &lt;/div&gt;
   
  
   &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;script src="./home.js"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>