Product Block Extending Beyond Full Width on Mobil

Site URL: https://www.purplehs.com/hybrid-red-cross-group-training-confirmation-elkridge

Hello!

We're could really use some help! 🙂 

Here's what we're struggling with:

Whenever I add a product block to a page, on mobile, the dropdowns in the product extend past the full width of the page. So, then the page ends up being messed up like the hamburger menu ends up hidden as well as as the shopping cart. Is there a way to set a max width for product blocks that we add to a page? 

For example, I just added a block to this page as a test: https://www.purplehs.com/hybrid-red-cross-group-training-confirmation-elkridge. You can see that on mobile, the page messes up. What do we need to do? 

Update: This issue has been resolved now. For anyone with a similar issue, here's what worked. This was suggested by tuanphan  

@media screen and (max-width:767px) {
select {
    width: 100%;
}
html, body {
    overflow-x: hidden;
}
}