title: Why is text element going outside of div?
body: <p>Really quick question, I have researched this and tried looking up a solution but have had no luck. I am vertically aligning two texts in a div but the text inside the div always goes outside it's container and I have no idea why.</p>
  
  <p>I have attached two images below. The first link is the problem, the second link is what I want it to look like.</p>
  
  <p>Thank you!
  <a href="https://i.stack.imgur.com/UVbOX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UVbOX.png" alt="Problem"></a>
  <a href="https://i.stack.imgur.com/i3YNo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i3YNo.png" alt="enter image description here"></a>
  CSS</p>
  
  <pre><code>body {
      margin: 0;
      padding: 0;
      background-color: #EFEFEF;
      font-family: sans-serif;
  }
  
  .homepage-window {
      height: 100vh;
      display: flex;
  }
  
  .nav-bar {
      width: 18%;
      background-color: #2E3E4E;
  }
  
  .bar-manager {
      width: 100%;
  }
  
  .top-bar {
      display: flex;
      align-items: center;
      height: 7%;
      width: 100%;
      background-color: white;
      border-bottom: 0.5px solid lightgrey;
  }
  
  .top-bar p {
      margin-left: 10px;
      font-weight: lighter;
  }
  
  .bottom-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 9%;
      width: 100%;
      background-color: white;
      border-bottom: 0.5px solid lightgrey;
  }
  
  .bottom-bar h1 {
      margin-left: 10px;
      font-weight: normal;
      font-size: 12px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;link rel="stylesheet" type="text/css" href="CSS/Homepage.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;head&gt;
      &lt;title&gt;Cold-Ops Homepage&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="homepage-window"&gt;
          &lt;div class="nav-bar"&gt;   
          &lt;/div&gt;
          &lt;div class="bar-manager"&gt;
              &lt;div class="top-bar"&gt;
                  &lt;p&gt;Homepage&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="bottom-bar"&gt;
                  &lt;h1&gt;Welcome, Omard2000&lt;/h1&gt;&lt;br&gt;
                  &lt;p&gt;some text&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>