你可以通过使用float（老方法）或flexbox来实现这一点。
下面是一个基于您的
我想让它看起来像这样

.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>

首先，不要这样，你有两个问题，对吧？
1.使h1和p到图像的右边。要做到这一点，只需重新排序html元素：

<div class="my-info">
    <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>
        <img class="me" src="CSS/images/me.jpg" alt="Nevin">
</div>

1.使它们居中，

.my-info {
     display: flex;
     justify-content:center;
 }

就是这样，你可以问更多的问题，毕竟这个地方是由怀疑和问题组成的。😂

你已经给了图像宽度的%，这就是为什么它需要这么多的空间。此外，我已经添加了代码对齐的内容

<div class="heading">
  <h1>The World of me: Portfolio</h1>
</div>

<div class="my-info">
  <div>
    <img class="me" src="https://png.pngtree.com/element_pic/17/09/23/fa56a61d288b1922002f4f7edf5ce3e6.jpg" 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>

.my-info {
  display: flex;
  align-items: center;
  justify-content: start;
  
}

.my-info img {
  border-radius: 50%;
  width: 70px;
  height: auto;
  margin-right: 20px;
}

.my-info div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  color: #f1efe8;
  font-family: 'Droid serif', serif;
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  line-height: 44px;
  margin: 0 0 12px;
  text-align: center;
}

.heading {
  background-image: url("https://mcdn.wallpapersafari.com/medium/50/40/Tnh47t.jpg");
  background-size: cover;
  width: 100vw;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  font-size: 36px;
  font-weight: 400;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
}

.job {
  font-size: 26px;
  font-weight: 400;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  margin: 0;
}
.personal{
  align-items:start;
}

你的css确实把你的name和job元素放在了图片的右边，但是要把它移到它的父div的右边，可以使用display:block和margin-left:auto。你似乎也想要一个右边距，所以我们可以使用margin-inline来设置。
要将.my-info div居中，您只需将其缩小到内容的宽度（默认情况下为屏幕宽度的100%，因此可以说它已经“居中”）。然后使用margin: auto在两侧应用相同大小的边距。
从历史上看，居中一直是Web开发中的一个PITA。这里有一篇来自w3c的文章可以帮助你。还有一个很好的实用程序叫做howtocenterincss，你可以用它来自动生成css来实现你想要的。
你还得到了一些超级棒的css，我已经注解掉了，并解释了它是如何工作的。
在代码中添加CSS重置也是推荐的，例如在body元素中添加margin：0。它消除了user agent stylesheet中的一些不可预测性。下面是Kevin Powell的简短video来解释这一点（如果你还没有跟随他，他对初级开发人员和初学者来说很棒-他的课程是值得的）。祝你在职业生涯中好运。
P.S.只是评论如果你有任何问题，我会回答他们。

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>