How to position FAQ block below product name on product page?

[Dev-Steve]

Hi together,

I wrote the following code to have the FAQ section as a block inside the product page.

It works, but the new faq blocks appears on the right side and not below the product name/price.

Can someone help me to set the code up?

The code:

<section>
    {%- if section.settings.show_sticky_add_to_cart and product.available -%}
      {%- render 'product-sticky-form', product: product -%}
    {%- endif -%}

    <div class="container">
      <nav aria-label="{{ 'general.breadcrumb.title' | t }}" class="breadcrumb text--xsmall text--subdued hidden-phone">
        <ol class="breadcrumb__list" role="list">
          <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="{{ routes.root_url }}">{{ 'general.breadcrumb.home' | t }}</a>
          </li>

          {%- if collection -%}
            <li class="breadcrumb__item">
              <a class="breadcrumb__link" href="{{ collection.url }}">{{- collection.title -}}</a>
            </li>
          {%- endif -%}

          <li class="breadcrumb__item">
            <span class="breadcrumb__link" aria-current="page">{{ product.title }}</span>
          </li>
        </ol>
      </nav>

      <!-- PRODUCT TOP PART -->
      <div class="product product--thumbnails-{{ section.settings.desktop_thumbnails_position }}">
        {%- render 'product-media', product: product -%}
        {%- render 'product-info', product: product, update_url: true -%}
        
        <!-- FAQ section -->
        <div class="faq__wrapper" itemscope itemtype="https://schema.org/FAQPage">
            {%- for block in section.blocks -%}
              {%- case block.type -%}
                {%- when 'category' -%}
                  <h2 id="category-{{ section.id }}-{{ block.id }}" class="faq__category heading h6 anchor" {{ block.shopify_attributes }}>
                    {{- block.settings.title |  escape -}}
                  </h2>

                {%- when 'question' -%}
                  <div class="faq__item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
                    <button is="toggle-button" class="collapsible-toggle text--strong" aria-controls="block-{{ section.id }}-{{ block.id }}" aria-expanded="false" itemprop="name">
                      {{- block.settings.title -}}
                      <span class="animated-plus"></span>
                    </button>

                    <collapsible-content id="block-{{ section.id }}-{{ block.id }}" class="collapsible anchor" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" {{ block.shopify_attributes }}>
                      <div class="collapsible__content text-container" itemprop="text">
                        {{ block.settings.answer }}
                     </div>
                    </collapsible-content>
                  </div>
              {%- endcase -%}
            {%- endfor -%}
        </div>
      </div>
    </div>
  </section>
{%- else -%}