Add this to your custom CSS:
.Skin #Footer,
.Skin #Footer:empty {
    max-width: 100vw;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: mediumseagreen;
    display: block;
    padding: 40px;
}
I've kept the colour as green to give an idea of where/how it appears. The thickness can be controlled through the padding.

ahmedA This is really close. While it does work, it is not at the very bottom of the screen so it looks a little funny since we have an image background. Is there any way for it to be at the very bottom so you cannot see any of the image below the white bar. Adjusting the padding did not fix the issue. See screenshot below.

Okay, for that you could try this. Ideally it should be pushed to the bottom, but I'm not sure how its interacting with the background image:
.Skin #Footer,
.Skin #Footer:empty {
position: absolute;
max-width: 100vw;
width: 100vw;
background-color: white;
display: block;
}

ahmedA Still running into the same issue. For some reason the bar is not showing up in the same place as the actual footer content normally does (down by the powered by Qualtrics icon).
I may have you work on this later on once our agreement if formalized.

Sure David.
Meanwhile, see if this works. Add this to the header.
    style="
        position: absolute;
        background: white;
        height: 40px;
        width: 100vw;
        top: calc(100vh + 40px);
        left: 0%;
        display: block;
        content-visibility: hidden;
    "
> ...