Remove spacing around mobile buttons AND

Also, I've worked out the mobile-only buttons vertical spacing BUT There is still a weird misalignment happening. I've scoured everywhere I can think of to check within Customize and the Section settings but can't find anywhere to fix it - any help would be greatly appreciated!

So for the Section or sections you want it to apply to, edit that section and on the Settings tab add an additional class. Note: if it already has a class name in there just separate them with space eg. class-1 class-2

Use a meaningful class name e.g image-buttons we can then edit the above CSS and use this class to specify just that section like so:

@media (min-width: 768px) {
    .image-buttons .custom-container-width .inside-grid-column a:first-child {
        position: relative;
    }
    
    .image-buttons .custom-container-width .inside-grid-column a:first-child:before {
        content: '';
        position: absolute;
        top: 0;
        left: 12px;
        right: 12px;
        bottom: 0;
        background-color: rgba(0, 91, 27, 0);
        transition: background-color 0.3s ease-in;
    }
    
    .image-buttons .custom-container-width .inside-grid-column a:first-child:hover:before {
        background-color: rgba(0, 91, 27, 0.69);
    }
}

For the mobile buttons they are currently escaping their container, this is because of padding on the button which makes them wider then their container to fix that edit the following CSS and add the line i have commented:

.button.mobile,
.button.mobile {
    display: block;
    background: #00661e;
    color: #FFF;
    border: 1px solid #FFF;
    width: 100%;
    text-align: center; 
    box-sizing: border-box; /* Add this property */
}

Thank you so much for all your help, David. I really appreciate your patience and prompt replies that work great!

You're very welcome, glad to be of help