Minimize space between buttons via CSS

Site URL: https://begonia-garlic-lpx7.squarespace.com

Hiya friends,
Picture attached. I targeted each of these buttons via their block ID's. Reducing the padding works great for vertical but does nothing for horizontal.  Example:  "block-id" {padding: 0 !important}

Adding spacers to the right and left isn't helping either.  I just want them nice and snug together. Usually I can find my answer on the forums, but no luck. Thank you so much for always helping me! 

Site: https://begonia-garlic-lpx7.squarespace.com/
pword: yes

3 hours ago, elijah_aaron said:

Site URL: https://begonia-garlic-lpx7.squarespace.com

Hiya friends,
Picture attached. I targeted each of these buttons via their block ID's. Reducing the padding works great for vertical but does nothing for horizontal.  Example:  "block-id" {padding: 0 !important}

Adding spacers to the right and left isn't helping either.  I just want them nice and snug together. Usually I can find my answer on the forums, but no luck. Thank you so much for always helping me! 

 

Site: https://begonia-garlic-lpx7.squarespace.com/
pword: yes

 

 

Try this using the block id to isolate the button row row.   This worked for me.

There is a 17px padding on the left and right side of the buttons too.  Hope this helps.

block idxxx {

.sqs-row {

display: flex;
justify-content: center; }

.sqs-col-4 {

width:20%; }

}

Thank you for your reply. Unfortunately, that didn't do anything - @tuanphan, any thoughts?

@tuanphan

Your advice worked great, but now I'm encountering this issue on mobile view (picture attached) Anyway to tell them to all be side by side on mobile view?

Thank you for always helping me! I deeply appreciate it!

15 hours ago, elijah_aaron said:

@tuanphan

Your advice worked great, but now I'm encountering this issue on mobile view (picture attached) Anyway to tell them to all be side by side on mobile view?

Thank you for always helping me! I deeply appreciate it!

Use this code