Shopify Buy Button Affecting Margins

Site URL: https://pearler.squarespace.com/feels

I've added a Shopify Buy Button onto the page using a code block. However, it's affecting the margins on the right of the section. Any ideas why?  

<div id='product-component-1617764303049' class="nav-gif-wrapper">
  	<img src="https://media0.giphy.com/media/l0Iyl89hueXgsyGRi/giphy.gif" height="100" style="top:-75px; left: 15%;">
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'pearlerwork.myshopify.com',
      storefrontAccessToken: 'eec0fbe1582313daf17f1305b3293c33',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '6641103274161',
        node: document.getElementById('product-component-1617764303049'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "font-weight": "bold",
        "color": "#822504",
        ":hover": {
          "color": "#822504",
          "background-color": "#e59ea3"
        },
        "background-color": "#feafb5",
        ":focus": {
          "background-color": "#e59ea3"
        },
        "border-radius": "0px",
        "padding-left": "70px",
        "padding-right": "70px"
      }
    },
    "contents": {
      "img": false,
      "title": false,
      "price": false
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-weight": "bold",
        "color": "#822504",
        ":hover": {
          "color": "#822504",
          "background-color": "#e59ea3"
        },
        "background-color": "#feafb5",
        ":focus": {
          "background-color": "#e59ea3"
        },
        "border-radius": "0px",
        "padding-left": "70px",
        "padding-right": "70px"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "option": {},
  "cart": {
    "styles": {
      "button": {
        "font-weight": "bold",
        "color": "#822504",
        ":hover": {
          "color": "#822504",
          "background-color": "#e59ea3"
        },
        "background-color": "#feafb5",
        ":focus": {
          "background-color": "#e59ea3"
        },
        "border-radius": "0px"
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-weight": "bold",
        "background-color": "#feafb5",
        ":hover": {
          "background-color": "#e59ea3"
        },
        ":focus": {
          "background-color": "#e59ea3"
        }
      },
      "count": {
        "color": "#822504",
        ":hover": {
          "color": "#822504"
        }
      },
      "iconPath": {
        "fill": "#822504"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

Hi. You missing a closing div tag

<div id='product-component-1617764303049' class="nav-gif-wrapper">
  	<img src="https://media0.giphy.com/media/l0Iyl89hueXgsyGRi/giphy.gif" height="100" style="top:-75px; left: 15%;">

It should be

<div id='product-component-1617764303049' class="nav-gif-wrapper">
  	<img src="https://media0.giphy.com/media/l0Iyl89hueXgsyGRi/giphy.gif" height="100" style="top:-75px; left: 15%;">
</div>

@tuanphan True, thanks! However unfortunately adding this hasn't fixed the issue.

22 hours ago, pearler1570048501 said:

@tuanphan True, thanks! However unfortunately adding this hasn't fixed the issue.

Add this to Code Block

<style>
  .page-section>.content-wrapper {
    box-sizing: border-box !important;
}
</style>

Also, other problems.

1. (Tablet-Footer) Overlap

2. (Tablet-Homepage)

3. (Tablet-Overlay) Menu has 1 item only. Want to force desktop nav on tablet?

4. (Mobile-Homepage) Want to move image on top?

5. (Mobile-Feels) Resize image?

Fantastic, @tuanphan that has worked beautifully. 

Yes I've been lazy with my  tablet styling there! Gosh. 

Image ①  Should I just make the button smaller on tablet, or force it to stack somehow? 

Image ② I'm not sure how to make this look better! The 3 columns don't work well on tablet do they, just desktop.

Image ③ I can change the forced mobile menu for tablet, thank you

Image ④ Yes it would probably be good to have the image on top 

Image ⑤ Should I make the container for the gallery have a max-width on tablet?