I am struggling to find the solution to a simple issue on my website, michelleforboe.com. The background image in a div is not covering the entire space as intended. I have tried using calc to set the height of the div, but it seems to be slightly off. Additionally, when scrolling down and back up, the black bar at the bottom of the image appears larger. There is another div overlaying the image, but I don't believe that is causing the problem. Can anyone identify what I might be missing?
.home-section-1 .wrap {
margin-left: 0;
}
.home .site-inner {
margin-top: 140px;
}
.home-section-1.widget-area {
background-size: 100% calc(100vw/2.9);
background-position: 50% 50%;
height: calc(100vw/2.9);
padding-top: 0;
padding-bottom: 0;
}
#text-7 {
height: calc(100vw/2.9);
}
#text-7 .widget-wrap {
height: 100%;
position: relative;
}
#text-7 .widget-wrap .textwidget {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#text-7 a.button {
font-size: 2vw;
padding: 1vw;
}
.home-section-1 .widget-wrap {
width: 50%;
}