Q:

HTML How to keep divs touching each other

When I resize the window (in Firefox at least) then my divs separate from each other. How can I keep my divs touching each other nicely?
Bare in mind that the whole background image has to display fully, I have solutions where the background image goes behind the scroll bar but I don't want that.

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.Div1 {
    background-image: url("https://imgur.com/7NQ3IOt.jpg");
    background-size: 100%, 100%;
    background-repeat: no-repeat;

    position: relative;
    height: 76.1vw;
    width: 100%;
}

.Div2 {
    background-image: url("https://imgur.com/CjVMSqG.jpg");
    background-size: 100%, 100%;
    background-repeat: no-repeat;

    position: relative;
    height: 169vw;
    width: 100%;
}

.Btns {
    position: absolute;
    font-size: 2.1vw;
    left: 16.5vw;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="Div1">
        <button class="Btns" style="top: 4.8vw">Button 1</button>
    </div>
    <div class="Div2">
        <button class="Btns" style="top: 4.3vw">Button 1</button>
    </div>
</body>
</html>

A:

Your divs touch each others. But the height of background image of the first div is smaller than the div's height.
Remove comma from background-size rule: background-size: 100% 100%;.

