Как расположить мои h1(меня зовут..) и <p>( A ср...) рядом с моим изображением, справа от изображения

body {
  /* you use this in a few elements so we'll set this as the default in your body, then you only need to add font-family if you need to change away from this */
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color:black;
}

* { 
  /* css reset - set margin to 0. It means you can remove margin:0 from your h1 and p classes below */
  margin:0;
}

.my-info {
  display: flex;
  align-items: center;
  /*To center your info container, set the width to shrink to the content and then use margin:auto to add space evenly left and right.*/
  width: fit-content;
  margin:auto;
}

.my-info img {
  border-radius: 50%;
  width: 25%;
  /* height: auto; not needed - height: auto is the default */
  display:block;  /*this allows us to position the image. Setting images to block level elements is recommended imho*/
  margin-inline: auto 20px;
  /*margin-right: 20px; deleted this, already declared in margin-inline */
}

.my-info div {
  /* Not needed - so deleted it my.info h1 already aligns your text in the center so you don't need to do this here. It's already covered
  display: flex;
  flex-direction: column;
  justify-content: center; 
  */
}

/* changed this from h1 to .heading-title and added the class to your html - this is because it's also styling the h1 in your 'my-info' div so we end up styling that one twice */
.heading-title {
  color: #f1efe8;
  font-family: 'Droid serif', serif;
  font-size: 36px;
  line-height: 44px;
  margin: 0 0 12px;
  /* text-align: center; not needed as we've used place-items:center in the .heading div which automatically centers the content */
}

.heading {
  background-image: url("https://mcdn.wallpapersafari.com/medium/50/40/Tnh47t.jpg");
  background-size: cover;
  /*width: 100vw; you don't need this as block level elements are 100% of the width of the viewport by default */
  height: 50vh;
  /*display: flex;
  justify-content: center;
  align-items: center; use grid here, you can save yourself a line of CSS :-) */
  display:grid;
  place-items:center;
}

.name {
  font-size: 36px;
}

.job {
  font-size: 26px;
  text-align: center;
}

.name, .job, .heading-title {
  /* we keep repeating this in your css above. Just declare it in one line so if you need to change it, you only need to change it once */
  font-style: italic;
  font-weight: 400;
}

<div class = "heading">
  <h1 class = "heading-title">The World of me: Portfolio</h1>
</div>
<div class = "my-info">
  <div>
    <img class = "me" src = "https://picsum.photos/id/433/200/200" alt = "Nevin">
  </div>
  <div class = "personal">
    <h1 class = "name">My name is <strong>Nevin Dabechuran</strong></h1>
    <p class = "job"><em>A Web designer</em></p>
  </div>
</div>

.profile {
            display: flex;
            align-items: center;
            column-gap: 10px;
            margin: 20px;
            border: 1px solid black;
            padding: 5px;
            width: 300px;
            background: #eaeaea;
        }
        
        .profile .thumb {
            width: 100px;
            height: 100px;
            
        }
        .profile .thumb img {
            width: 100%;
            height: auto;
        }

        .profile .name {
            margin: 0;
            font-family: serif;
            font-weight: bold;
            font-size: 18px;
            color: black;
        }
        .profile .job {
            margin: 0;
            font-family: sans-serif;
            font-size: 14px;
            color: black;
        }

<div class = "profile">
    <div class = "thumb">
        <img src = "https://randomuser.me/api/portraits/lego/1.jpg" alt = "Nevin">
    </div>
    <div class = "info">
        <h1 class = "name">Nevin Dabechuran</h1>
        <p class = "job">Web designer</p>
    </div>
</div>