How to Rolocate (Move) Breadcrumbs

Assuming you want the breadcrumb trail to be centered like the content, you probably want to add the container CSS class to the div surrounding the breadcrumb trail. That is: replace:
<div vocab="https://schema.org/" typeof="BreadcrumbList" class="breadcrumbs">
with: <div vocab="https://schema.org/" typeof="BreadcrumbList" class="breadcrumbs container">

Thank you so much John!

This is a perfect solution for me.
Thank you again! ??

Can I ask one more question?
How can I make a gap between the breadcrumb trail and the product image? I tried customized it on CSS file. But it doesn’t’ work well.

Please let me know how to customize this.

Thank you!

You will want to add some padding. For example, adding the following to your theme’s style.css will add 1em of padding below the breadcrumb trail:

.breadcrumbs {
padding-bottom: 1em;
}