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>