How do I get a shadow box border between widgets?

Hi there,

do you want to separate the widgets ie. Twitter Feed and Popular articles ? Or each individual tweet or post ?

Really just a border between each separate widget.

Just to confirm, do you want to add a border between Load More and Popular Articles?
https://www.screencast.com/t/7bQ28GjLN

Yes, exactly

Try this:

.sidebar .widget {
    border-bottom: 1px solid #000;
}

This worked on mobile but how do I get it for desktop as well?

My code has no media query so it should work on all devices.

Perhaps you have a media query that’s missing a closing bracket in the previous CSS?

I'm not sure how to check

This is part of your current CSS, where you can see that latest CSS rule is inside the @media query:

@media (max-width: 768px) {

    .separate-containers #main,
    .separate-containers .inside-right-sidebar,
    .separate-containers .inside-left-sidebar {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .separate-containers .widget,
    .separate-containers .site-main>*,
    .separate-containers .page-header,
    .widget-area .main-navigation,
    .post {
        margin-bottom: 10px;
    }

    .widget-area .widget {
        padding: 30px;
    }

    #generate-slideout-menu .inside-navigation.grid-container.grid-parent {
        padding: 0;
    }

    .main-navigation.has-branding:not(.grid-container) .inside-navigation:not(.grid-container) .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: unset;
        margin-right: unset;
    }

    .main-navigation .menu-bar-items {
        flex-direction: row-reverse;
        flex: 1;
        justify-content: space-between;
    }

    .main-navigation.has-branding .menu-toggle {
        order: -1 !important;
    }

    .sidebar .widget {
        border-bottom: 1px solid #000;
    }
}

Edit the CSS so .sidebar .widget CSS comes before the @media like so:

.sidebar .widget {
    border-bottom: 1px solid #000;
}

@media (max-width: 768px) {

    .separate-containers #main,
    .separate-containers .inside-right-sidebar,
    .separate-containers .inside-left-sidebar {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .separate-containers .widget,
    .separate-containers .site-main>*,
    .separate-containers .page-header,
    .widget-area .main-navigation,
    .post {
        margin-bottom: 10px;
    }

    .widget-area .widget {
        padding: 30px;
    }

    #generate-slideout-menu .inside-navigation.grid-container.grid-parent {
        padding: 0;
    }

    .main-navigation.has-branding:not(.grid-container) .inside-navigation:not(.grid-container) .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: unset;
        margin-right: unset;
    }

    .main-navigation .menu-bar-items {
        flex-direction: row-reverse;
        flex: 1;
        justify-content: space-between;
    }

    .main-navigation.has-branding .menu-toggle {
        order: -1 !important;
    }
 
}

You guys are amazing.

Glad we can be of help!