Bootstrap 5.3.2 modal footer left-padding or left-margin?

I want to make modal that looks like a chat box. I did most of the work already but the input area is not fixed. Ideally, I want the input text to be on the footer but the modal footer seem to have an invisible left margin or padding and I can't get rid of it through CSS. I want the whole of the modal footer field to be occupied.

I tried setting is its padding and margin to 0 but to no-avail.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="modal modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <div class="modal-content">
    <div class="modal-header">
      <img src="https://via.placeholder.com/50" alt="picture of angie" class="chatbox-pic img-fluid" />
      <h1 class="modal-title fs-5 mx-3" id="chat-modalLabel">Angie</h1>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <div class="chatbox">
        <p class="chat1">Hi! I really like your picture!</p>
        <div class="clear"></div>
        <p class="chat2">
          Thanks! I love yours, btw. You look busy with work.
        </p>
        <div class="clear"></div>
        <p class="chat1">
          I do. Thank goodness THWP is for busy people like us.
        </p>
        <div class="clear"></div>
        <p class="chat2">Loving this app. It's lovable with you in it.</p>
        <div class="clear"></div>
        <p class="chat1">LOL. Where you at right now? Work?</p>
        <div class="clear"></div>
        <p class="chat2">Yeah. I'm near Rosenberg. How about you?</p>
        <div class="clear"></div>
        <p class="chat1">That's just a 15-min drive from here!</p>
        <div class="clear"></div>
        <p class="chat2">Nice! You free today?</p>
        <div class="clear"></div>
        <p class="chat1">Sadly, no.</p>
        <div class="clear"></div>
        <p class="chat2">Bummer.</p>
        <div class="clear"></div>
        <p class="chat1">I'm free this Saturday. Maybe, we could...</p>
      </div>
    </div>
    <div class="modal-footer justify-content-between">
      <form>
        <label for="message-text"></label>
        <div class="input-group">
          <input type="text" class="form-control w-100" id="message-text" aria-describedby="send-button" />
          <div class="input-group-append">
            <a href="#" class="btn input-group-text"><span
                      class="material-symbols-rounded align-middle"
                      id="send-button"
                      >send</span
                    ></a
                  >
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

Solution

There two things you must to know:

The modal footer has a padding so you need set it to cero with p-0 or px-0.
The form is not 100% width so you need set w-100 class.

So I did this changes to your code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="modal modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <div class="modal-content">
    <div class="modal-header">
      <img src="https://via.placeholder.com/50" alt="picture of angie" class="chatbox-pic img-fluid" />
      <h1 class="modal-title fs-5 mx-3" id="chat-modalLabel">Angie</h1>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <div class="chatbox">
        <p class="chat1">Hi! I really like your picture!</p>
        <div class="clear"></div>
        <p class="chat2">
          Thanks! I love yours, btw. You look busy with work.
        </p>
        <div class="clear"></div>
        <p class="chat1">
          I do. Thank goodness THWP is for busy people like us.
        </p>
        <div class="clear"></div>
        <p class="chat2">Loving this app. It's lovable with you in it.</p>
        <div class="clear"></div>
        <p class="chat1">LOL. Where you at right now? Work?</p>
        <div class="clear"></div>
        <p class="chat2">Yeah. I'm near Rosenberg. How about you?</p>
        <div class="clear"></div>
        <p class="chat1">That's just a 15-min drive from here!</p>
        <div class="clear"></div>
        <p class="chat2">Nice! You free today?</p>
        <div class="clear"></div>
        <p class="chat1">Sadly, no.</p>
        <div class="clear"></div>
        <p class="chat2">Bummer.</p>
        <div class="clear"></div>
        <p class="chat1">I'm free this Saturday. Maybe, we could...</p>
      </div>
    </div>
    <div class="modal-footer justify-content-between px-0">
      <form class="w-100">
        <label for="message-text"></label>
        <div class="input-group">
          <input type="text" class="form-control w-100" id="message-text" aria-describedby="send-button" />
          <div class="input-group-append">
            <a href="#" class="btn input-group-text"><span
                      class="material-symbols-rounded align-middle"
                      id="send-button"
                      >send</span
                    ></a
                  >
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>