How to align the first container based on second container?

Question

Below is my code in html and CSS. Current result and my desired result with red.

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

.product-detail-container .path {
  font-size: 1.1rem;
  font-family: var(--fontCommon);
  display: flex;
  color: black;
}
.product-detail-container .path a:hover {
  text-decoration: underline;
  color: black;
}
.product-detail-container .photo {
  width: 45%;
}

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

.description {
  display: flex;
  margin-left: 2rem;
  flex-direction: column;
}

<div class="product-detail-container">
  <div class="path">
    <a class="path" href="/index.html">All products/</a>
    <p class="path" id="path-product-title">product-title</p>
  </div>
  <div style="display: flex; margin-top: 30px; justify-content: center">
    <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>

I want to make the path which is "All products/chocolate" align with the photo below it but I need to keep the all element inside .product-detail-container CENTER. How to achieve?

Answer 1

Removing justify-content: center from the inline style fixes the path and product-detail alignment. Once you have that, you can work on aligning <div class="product-detail-container"> where you want. See the snippet bellow. I also added borders in the elements to make it easier to see.

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