Cut borders in html

I am trying to make a little container to show some messages but it gets cut on the sides as you can see on the example.

My HTML and CSS are this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.mensajes{
    position: absolute;
    max-height: 7%;
    width: 40%;
    margin-left: 12%;
    padding: 0.25%;
    z-index: 2;
    overflow: auto;
    display: grid;
    align-items: center;
    justify-items: center;
    background-color: #111111a6;
    border-radius: 0 0 5px 5px;
}

.mensaje{
    position: relative;
    width: 95%;
    padding: 5px;
    margin-top:2%;
    margin-bottom: 2%;
    height: fit-content;
    background-color: #9a9999bc;
    border-radius: 5px;
}

<!-- language: lang-html -->

<div id="mapa" class="mapa">
  <div class="mensajes" id="mensajes"></div>
  <div class="coordenadas">
    <b id="latitud" style="color: blue;"></b><br>
    <b id="longitud" style="color: red;"></b>
  </div>
</div>
<script>
  msgsBox = document.getElementById("mensajes")
  mensaje = document.createElement("div")
  mensaje.classList.add("mensaje")
  mensaje.textContent= "No GPS detected, check your connection"
  mensaje.style.backgroundColor = "#FF5733B3"
  mensaje.style.color = "#E8E8E8"
  msgsBox.appendChild(mensaje)
  msgsBox.scrollTop = msgsBox.scrollHeight
</script>

<!-- end snippet -->

In the HTML "mapa" uses display:flex and ocupies the left half of the screen.

EDIT:

Updated the code to include the suggestions given in the comments, thanks to all, it works now.

Use inner padding on .mensajes. You always want to add about 33% more padding to the left and right of text compared to the top, in order to frame it evenly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.mensajes 
{
  width: 40%;
  margin-left: 12%;
  padding: 0.5em;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: #111111a6;
  
  border-radius: 0 10px 10px;
}

.mensaje 
{
  width: 95%;
  padding: 6px 8px;

  background-color: maroon;
  color: #fff;
  
  border-radius: 5%;
}

<!-- language: lang-html -->

<div id="mapa" class="mapa">
  <div class="mensajes" id="mensajes">
    <div class="mensaje">
      The text goes here
    </div>  
    </div>
  <div class="coordenadas">
    <b id="latitud" style="color: blue;"></b><br>
    <b id="longitud" style="color: red;"></b>
  </div>
</div>

<!-- end snippet -->