Is there a correct way to do this layout in HTML/CSS

Question

I am new to web development and I am making a small "About Me" website using html/css . I managed to do this layout : https://i.sstatic.net/ZyCU0.jpg

Although it did the job done, I am just concerned that with this layout/code will affect the future ones

.container {
    transform: translate( 0, 150px);
    display: block;
    margin: 0 auto;
    align-items: center;
    background-color: black;
    width: 80%;
    height: 100vh;
    border-radius: 20px;
    border: 2px solid white;
}

.pfp {
    width: 30px;
    margin: 0 auto;
    float: left;
    padding: 60px;
}

.pfpp {
    width : 250px;
    border-radius: 20px;
}

.textt {
    margin: 0 auto;
    text-align: center;

}

.txtdesign {
    color: white;
    transform: translate(250px, 150px);
    float: left;
}

<section id="AboutMe">
    <div class="container">
            <div class="pfp">
                <img src="https://via.placeholder.com/150/0000FF/808080?text=my%20face" class="pfpp">
            </div> 
            <div class="textt">   
            <h1 class="txtdesign">Hi! My name is...</h1>
        </div>
    </div>
</section>

Answer 1

You can do something like this:

*{margin:0;padding:0;}

.item1{grid-area:pfp;}
.item2{grid-area:text;}

.container{
  display:grid;
  grid-template-columns: 150px auto;
  width:80%;
  background-color:black;
  margin:0 auto;
  margin-top:10vh;
  padding:30px 30px 30px 30px;
  height:90%;
  border-radius:10px;
  min-height:600px;
}

<section id="AboutMe">

    <div class="container">
    
        <div class="pfp">
            <img src="https://via.placeholder.com/150/0000FF/808080?text=my%20face">
        </div> 
        
        <div class="text" style="padding:5px 20px 5px 20px;">   
          <h1 class="txtdesign" style="color:white">Hi! My name is...</h1>
        </div>
        
    </div>

</section>

Note: this css uses grid layout, you can read more about it here