从内联样式中删除justify-content: center修复了path和product-detail的对齐方式。一旦完成，就可以在需要的位置对齐<div class="product-detail-container">。请参阅下面的代码片段。我还在元素中添加了边框，以使其更容易查看。

.product-detail-container {
  display: flex;
  flex-direction: column;
  /* width: 97%; */
  max-width: 1200px;
  align-self: center;
  justify-content: center;
  margin: 2.5rem 5%;
  border: 1px solid black;
}

.product-detail-container .path {
  font-size: 1.1rem;
  font-family: var(--fontCommon);
  display: flex;
  color: black;
  border: 1px solid green;
}

/* to fix vertical alignment */
.product-detail-container .path-item {
  margin: 5px 0;
}

.product-detail-container .path-item a:hover {
  text-decoration: underline;
  color: black;
}

/* moved inline style to this class */
.product-detail {
  display: flex;
  margin-top: 30px;
  border: 1px solid red;
  /* justify-content: center */
}

.product-detail-container .photo {
  border: 1px solid cyan;
  width: 45%;
}

.product-detail-container .photo img {
  width: 100%;
  border: 1px black solid;
}

.description {
  display: flex;
  margin-left: 2rem;
  flex-direction: column;
  flex-grow: 1; /* added this */
  border: 1px solid blue;
}

<div class="product-detail-container">
  <div class="path">
    <a class="path-item" href="/index.html">All products/</a>
    <p class="path-item" id="path-product-title">product-title</p>
  </div>
  <div class="product-detail">
    <div class="photo" id="product-photo">
      <img src="/assets/products/1.jpg" class="photo" />
    </div>
    <div class="description">
      <p class="product-title" id="product-title">product-title</p>
      <p class="product-id" id="product-id">product-id</p>
      <p
        class="product-price"
        id="product-price"
        style="margin-top: 2vh">
        product-price
      </p>
    </div>
  </div>
</div>