title: The body content of this modal spills outside of the modal box, how can I make it so the text stays within the modal
body: <p>In my angular 7 application, we are using bootstrap 4 for our styling.  When this modal opens, the text inside of it spills outside of the box, how can I modify the css so that the content is responsive and stays within the modal?</p>
  
  <p>I am debugging someone else's code, so it is difficult for me to figure out exactly how they've set this up.  </p>
  
  <p>Here is the modal element that they are using, it is actually set up as an aside element:</p>
  
  <pre><code>&lt;aside class="modal fade model-demographic" tabindex="-1" id="name-information" role="dialog" aria-labelledby="System Warning" aria-hidden="true"&gt;
      &lt;div class="demographic-name-dob modal-dialog modal-dialog-centered modal-lg  blue" role="document"&gt;
          &lt;div class="modal-content modal-info-content"&gt;
              &lt;div class="modal-header model-info-header"&gt;
                  &lt;h5 class="modal-title"&gt;&lt;b&gt;Name&lt;/b&gt;&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class="modal-body d-flex justify-content"&gt;
                  &lt;div class="row"&gt;
                      &lt;h4 class="col-12"&gt;To make any changes to your first name, middle initial or last name, please contact us.&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary close-modal" aria-label="cancel"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/aside&gt;
  </code></pre>
  
  <p>From some debugging, I believe this is the css class they are using that is causing the problem:</p>
  
  <pre><code>.modal-info-content {
    width: 55%;
    height: 35%;
    margin: 0px auto;
    position: fixed;
    top: 50px;
    right: 50px;
    bottom: 50px;
    left: 50px;
  }
  </code></pre>
  
  <p>I'm assuming it has to do with position: fixed but am not sure how to change this so that it is responsive in mobile view.</p>