Floating Text Next to An Image HTML CSS - html

Question

I'm trying to float text around an image, but for some reason, the text won't go in the right place.
Here is what I want it to look like. I was able to create this in an editor by itself, but when I add it to my page, it breaks it and doesn't work.
I'm having trouble getting it to look like my other example. They have the same code for that part. Need help figuring out how to get it close to the first example.
Mine Now:
section{
display:flex;
border-style:solid;
background-color:azure;
}
img {
padding-top: 5em;
padding-right:2em;
}
p{
float:right;
}
h1{
text-align:center;
}
<section>
<img src="images/GM05.png" alt="headshot">
<article>
<h1>Name Goes Here.</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>

Answer 1

There are no floats involved. Put your image in another wrapper. Then apply flex property to that wrapper. Adjust the last value (flex-basis) to the width you want that "column" to be.
aside {
flex: 0 0 40%; /* flex-grow: 0; flex-shrink: 0; flex-basis: 40%; */
padding-top: 64px;
}
You can center the image in that space with margin.
aside img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto; /* auto on the sides centers the item */
}
section {
display: flex;
border-style: solid;
background-color: azure;
}
aside {
flex: 0 0 40%;
padding-top: 64px;
}
aside img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
h1 {
text-align: center;
}
<section>
<aside>
<img src="https://picsum.photos/200/300" alt="headshot">
</aside>
<article>
<h1>Name Goes Here.</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae
risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet
sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>

Answer 2

If i understand correctly, you just wanna to display this image on the center.
So, change padding-top: 5em; to margin: auto;
Best regards,
Brhaka