Next.jsのImageコンポーネントを使って、画像がなぜか中央寄せに表示されたら layout="fill"を疑おうという話

どう頑張っても画像が他の要素の上に配置され、「中央寄せ」が解除されなかったため、その時解決できた方法を書いてみます。

前提として以下のようなコンポーネントの内容になっています。

※TailwindCSSも使っていますが、TailwindCSSは特に今回、謎の画像の中央寄せに影響していません。

使用技術

• TypeScript
• Next.js
• TailwindCSS

実装例

main.tsx

import React from 'react';
import Image from 'next/image'
export const Main = () => {
  return (
    <main className="
        px-6
        sm:px-6
        md:px-11
        lg:px-24
        h-screen
        pt-10
        sm:pt-10
        md:pt-12
        lg:pt-16
        bg-gray-100
        ">
       <section className="flex flex-col lg:flex-row">
            <div id="wrapper-left" className='order-2 sm:order-2 lg:order-1'>
                <h2 className="
                    text-3xl
                    sm:text-3xl
                    lg:text-[40px]
                    text-gray-700
                    leading-normal
                    sm:leading-normal
                    lg:leading-loose
                    tracking-normal">
                    TEXT
                </h2>
            </div>
            <div className="
                order-1
                sm:order-1
                md:order-1
                lg:order-2
                ">
                <Image src='/images/illust1.png'
                    alt="illust"
                    width={400}
                    height={400}
                    objectFit='contain'
                    quality={50}
                    priority={true}
                    className="
                        pt-12"/>
            </div>
       </section>
   )
}

sectionタグにflexを指定して、その子のdivタグにorderで要素の配置される順序を指定したのに、なぜか効かず、marginも効かない・・
そんな時にNext.jsで推奨されているImageコンポーネントのプロパティ、「layout='fill'」が怪しいのでは？と疑い、それを外したところ、orderも効くようになりました！