Model Viewer - Arranging composition and alignmnet issues

Hi all!  

Im really enjoying Google Model Viewer and have plans for many models to be embedded in my site in multiple pages.  Problem is Im not understanding how to arrange them to show up where I place them (dragging the embed box around does not seem to always correspond with where it shows up) and also having issues with all models showing up half off screen on mobile version instead of centering.  Here is an example of half off screen on mobile.  No matter where I drag the embed code block on the page it does not change where it shows up on mobile.  If I drag to far Left it still look same on mobile.  Any thought?  Thanks!

https://papaya-gecko-73nz.squarespace.com/config/pages/64c4c4615a1ae954c81a4d19  

password: huey

Which page are you referring to? I don't see it on homepage

/config is url for site admin

https://papaya-gecko-73nz.squarespace.com/?noredirect

Ah!  Sorry Its

https://papaya-gecko-73nz.squarespace.com/hueys-rock-shop

password: huey

With mobile, try adding this to Design > Custom CSS (or Website > Website Tools > Custom CSS)

@media screen and (max-width:767px) {
model-viewer {
    width: 100% !important;
}
}

I may have put it in the wrong section?  I didn't see a shift.

My code has 2 } at the end, but your code has 3 }

Maybe you added code to wrong position

I tried in a couple places and still no luck.  Should I be placing it in Custom CSS like I have it here?  

thank you so much!!!