Screenshot of the page

I'm trying to make a web dashboard for my discord bot. after adding the button to the div in the screenshot above, I got this weird behavior of the h3 that pushes the button to the right and buts the h3 value to the left. How can I fix this so that the h3 is centered above the button, which should be centered between the imagine and the right div boarder?

.guildBImg {
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 20px;
  background-position: center;
  width: 100%;
  height: 100%;
}

<div style="background-image: url('https://cdn.discordapp.com/icons/623189087225905153/91396f1f4ea9ed9865112db0c827682a.webp?size=96'); filter: blur(5px) brightness(50%); -webkit-filter: blur(5px) brightness(50%); float: left;" class="guildBImg"></div>
<div style="width: 100%; height: 100%; position: relative; display: flex;">
  <img src="https://cdn.discordapp.com/icons/623189087225905153/91396f1f4ea9ed9865112db0c827682a.webp?size=128" style="width: 100px; height: 100px; border-radius: 50%; border-width: 2px; border-color: #ffffff; border-style: solid; float: left; margin-top: -140px;"
  />
  <h3 style="font-size: 16px; font-weight: bold; margin-top: -140px; text-overflow: ellipsis; max-height: 70px; overflow: hidden; margin-left: 30px; display: flexbox; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m</h3>
  <button style="background-color: #5865f2; width: 240px; height: 35px; border-radius: 5px; border-width: 0px; border-color: #ffffff; border-style: solid; color: #ffffff; display: flexbox; font-size: 16px; font-weight: bold; margin-top: -55px;">Manage</button>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

try this:

.guildBImg {
background-repeat: no-repeat; 
background-size: 100%; 
border-radius: 20px; 
background-position: center;
width: 100%;
height: 100%;
}

h3{
  margin:0;
  padding: 0;
  overflow: hidden;
}

    <div style="width: 500px; height: 300px">
        <img src="https://cdn.discordapp.com/icons/623189087225905153/91396f1f4ea9ed9865112db0c827682a.webp?size=512');" style="filter: blur(5px) brightness(50%); object-fit: cover; -webkit-filter: blur(5px) brightness(50%); height:400px object-fit" class="guildBImg" />
      <div id="container" style="margin-top: -200px; z-index: 2; position: relative; margin-left: 50px">
        <img src="https://cdn.discordapp.com/icons/623189087225905153/91396f1f4ea9ed9865112db0c827682a.webp?size=128" style="width: 100px; height: 100px; border-radius: 50%; border-width: 2px; border-color: #ffffff; border-style: solid; float: left; "/>
        <div id="text-container" style="margin-left: 100px; padding-top: 15px">
          <h3 style="text-overflow: ellipsis; max-height: 70px; overflow: hidden; margin-left: 30px; display: flexbox; color: white;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m</h3>
          <button style="margin-left: 25px; background-color: #5865f2; width: 240px; height: 35px; border-radius: 5px; border-width: 0px; border-color: #ffffff; border-style: solid; color: #ffffff; display: flexbox; font-size: 16px; font-weight: bold; margin-top: 5px">Manage</button>
        </div>
    </div>      

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>