Code Help! "Scrolling quick add box" needs to be centered on page!!

[NashMashPets]

i have been up all night trying to figure this out. .....The quick add - box needs to be centered to the page.. this is for desktop view. not mobile. Here is a picture, Right now it is still on the bottom right. i need it bottom center!!! I believe the code edit answere is somewhere in the product.liquid section. Im unsure!!!!! bleh Its the "dog training" box-bottom right in the picture. Does anyone know how to fix this?

[webwondersco]

@NashMashPets Please add the below line of CSS code at the end of your theme.css file.

body .shopify-section--main-product .product-quick-add{
    left:0;
    margin:0 auto;
}

@media(min-width:700px){
body .shopify-section--main-product .product-quick-add{
    left:1rem;
}
}

[NashMashPets]

edit code ---> theme.css ------> scroll down to bottom-----pasted CSS Code------> refreshed website page multiple times with clickouts-------> nothing happend. Box is still bottom right.

[webwondersco · Accepted solution]

@NashMashPets it looks like not loading in the current CSS.

Do one thing remove from the theme.css file and add the below CSS just before the ending of </body> tag in theme.liquid file.

<style>
body .shopify-section--main-product .product-quick-add{
    left:0;
    margin:0 auto;
}

@media(min-width:700px){
body .shopify-section--main-product .product-quick-add{
    left:1rem;
}
}
</style>

[NashMashPets]

YOU THA MAN!!!!!!!

[NashMashPets]

Is it possible to get the full scroll quick add box on mobile at the bottom  of the mobile screen also??