basti1012.bplaced.net

Guten Abend, ich wollte mich mal erkundigen wie ich 2 Bilder nebeneinander machen kann, mit einem Text.

Code

                                    
                                <style>
  .name2 {
  font-size: 20px;
  font-family: Arial Black;
  color: red;
}
.rush p {
  font-size: 20px;
  font-family: Coiny;
  background-color: rgba(226,240,0,0.4);
  width: 100%;
text-align:center;
}
.rush img {
  border: 5px solid #DCD80C;
  padding: 5px;
  margin: 0px 20px;
  border-radius: 50%;
  height: 150px;
  width: 150px;

}
.cloud p {
  font-size: 20px;
  font-family: Coiny;
  background-color: rgba(226,240,0,0.4);
  width: 300px;
}
.cloud img {
  border: 5px solid #DCD80C;
  padding: 5px;
  margin: 0px 70px;
  border-radius: 50%;
  height: 150px;
  width: 150px;
}

main{
  display:flex;
  flex-direction:column;
    justify-content: center;
  }
  #content{
    display:flex;
        justify-content: center;
    }
 nav{
display:flex;
   justify-content: center;
 }
nav p{
  font-size:25px;
  font-weight:900;
}
 .rush{
   display:flex;
   flex-direction:column;
     margin:auto;
   border:1px solid black;
 }
  .rush{
   margin:0;
 }
</style>
<main>
  <nav><p>Server Managment</p></nav>
  <div id="content">
   <div class="rush">
  <img src="/image/avatar_user4825_1577104569.jpg" alt="" border="0">  
    <p class="name2">GleichZeitig_YT</p>
  </div>
 <div class="rush">
 <img src="/image/avatar_user4825_1577104569.jpg" alt="" border="0">  
  <p class="name2">GleichZeitig_YT</p></div>
     <div class="rush">
 <img src="/image/avatar_user4825_1577104569.jpg" alt="" border="0">  
    <p class="name2">GleichZeitig_YT</p>
  </div>
  </div>
  </main>