title: Why does styling of one div affect another?
body: <p>"Mid" and "right" are supposed to still be just under the nav bar, but when I vertically aligned my "left" text, "mid" and "right" vertically aligned along with it.</p>
  
  <p>What do I need to change to have only "upper left" and "lower left" vertically aligned inside the images, while leaving "mid" and "right" still at their default position just below the nav bar?</p>
  
  <p><a href="https://i.stack.imgur.com/oPjxx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oPjxx.png" alt="enter image description here"></a></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>/* Main Content Seperation */
  
  div.contentContainer {
    margin: 0 auto;
  }
  div.left,
  div.right {
    width: 20%;
    display: inline-block;
  }
  div.mid {
    width: 50%;
    display: inline-block;
    border: 1px solid black;
  }
  /* Left Content */
  
  div.left {
    height: 740px;
    color: white;
  }
  div.upperLeft,
  div.lowerLeft {
    border: 1px solid white;
  }
  div.upperLeft {
    height: 366px;
    background-image: url("mainimg_macbook.png");
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  div.lowerLeft {
    height: 366px;
    background-image: url("mainimg_typing.png");
    background-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contentContainer"&gt;
    &lt;div class="left"&gt;
      &lt;div class="upperLeft"&gt;
        &lt;p class="left"&gt;Upper Left&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="lowerLeft"&gt;
        &lt;p class="left"&gt;Lower Left&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="mid"&gt;
      &lt;p&gt;Mid&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="right"&gt;
      &lt;p&gt;Right&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>