container used in class on Page is duplicated in Layout when Built

[amlcodes]

Description

So when running gatsby develop everything runs as expected. But when running gatsby build. It appears as though the container used in a page.js is being used and duplicated when using a div container in Layout

Steps to reproduce

will make a demo project soon, but just wrapping page element with layout in gatsby-browser.js

the layout:

return (
        <>
            <Header />
            <div id="layout-container">
                <NavBar location={location} menuLinks={data.site.siteMetadata.menuLinks} />
                <main style={{
                    margin: `0`,
                    // maxWidth: 960,
                    // padding: `0px 1.0875rem 1.45rem`,
                    paddingTop: 0,
                }}>{children}</main>
            </div>
        </>
    )

pages/ index.js :

<div id="page-container">
        <SEO title="Home" />
        <HeroSection />
        <ServicesSection />
        <ProcessSection />
        <ContactSection />
        <Link to="/page-2/">Go to page 2</Link>
    </div>

gatsby-browser.js

export const wrapPageElement = ({ element, props }) => {
    // props provide same data to Layout as Page element will get
    // including location, data, etc - you don't need to pass it
    return <Layout {...props}>{element}</Layout>
}

Expected result

What should happen?

<div id="layout-container">
    <nav />
    <main>
        <div id="page-container">
         ..
        </div>
     </main>
</div

Actual result

What Happened?

<div id="page-container">
    <nav />
    <main>
        <div id="page-container">
         ..
        </div>
     </main>
</div

Environment

fine with development is not fine with build/serve and when deploying/build/serve

System: OS: macOS 10.15.1 CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 13.5.0 - /usr/local/bin/node npm: 6.13.4 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 79.0.3945.88 Safari: 13.0.3 npmPackages: gatsby: ^2.18.12 => 2.18.17 gatsby-image: ^2.2.34 => 2.2.37 gatsby-plugin-manifest: ^2.2.31 => 2.2.34 gatsby-plugin-offline: ^3.0.27 => 3.0.30 gatsby-plugin-react-helmet: ^3.1.16 => 3.1.18 gatsby-plugin-sharp: ^2.3.5 => 2.3.10 gatsby-plugin-typography: ^2.3.20 => 2.3.20 gatsby-source-filesystem: ^2.1.40 => 2.1.43 gatsby-transformer-sharp: ^2.3.7 => 2.3.9 npmGlobalPackages: gatsby-cli: 2.8.22

Run gatsby info --clipboard in your project directory and paste the output here.

[LekoArts]

Thank you for opening this!

You're currently only adding this container on the client (gatsby-browser.js) and it's not in the generated HTML. This can cause such problems. As stated on the API docs (https://www.gatsbyjs.org/docs/browser-apis/#wrapPageElement) you'll also need to copy the contents of gatsby-browser.js to gatsby-ssr.js. This should resolve your issue.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[amlcodes]

oh i feel dumb, thank you as always @LekoArts

[fullstacksk]

Why the elemnts are being duplicated and being injected outside of ___gatsby ID?