The extra space might be coming from the .site-inner
on line 655 in your style.css –
.site-inner {
background-color: #fff;
clear: both;
margin-top: 170px;
position: relative;
z-index: 9;
-word-wrap: break-word;
}
So if you’re going to add that widget then I would adjust the margin-top
for the .site-inner
. You can either adjust the CSS directly in your style.css or you can add it to your Custom CSS section.
If you need two widgets with different colors back to back, then just duplicate all of the steps and rename the 2nd widget. You can rename it something different, or just add -2
at the end. after-header-widget-2
Let me know if that helps.